微信小程序开发效果：animation心跳动画

港控/mmm° 2022-06-10 07:55 300阅读 0赞

1、[**微信小程序开发**][Link 1]animation心跳动画

1.wxml文件中：
     2.[html] view plain copy
     3.<view class="bottomViewItem"> 
     4.<view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> 
     5.<view class="bottomMiddleHeaderItem" animation="{
        {animationMiddleHeaderItem}}"> 
     6. 
     7.<view class="bottomMiddleHeaderItemSubView"> 
     8.<image src="/images/detail_vote_heart.png" style="width:32rpx; height:32rpx;" animation="{
        {animationMiddleHeaderItem}}"></image> 
     9.</view> 
     10. 
     11.<view class="bottomMiddleHeaderItemSubView">投票</view> 
     12.</view> 
     13.</view> 
     14.</view>

js文件中：

1.[javascript] view plain copy
     2.// 页面渲染完成 
     3.onReady: function () { 
     4.var circleCount = 0; 
     5.// 心跳的外框动画 
     6.this.animationMiddleHeaderItem = wx.createAnimation({ 
     7.duration:1000, // 以毫秒为单位 
     8./** 
     9.* http://cubic-bezier.com/#0,0,.58,1 
     10* linear 动画一直较为均匀 
     11.* ease 从匀速到加速在到匀速 
     12.* ease-in 缓慢到匀速 
     13.* ease-in-out 从缓慢到匀速再到缓慢 
     14.* 
     15.* http://www.tuicool.com/articles/neqMVr 
     16.* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过 
     17.* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过 
     18.*/ 
     19.timingFunction: 'linear', 
     20.delay: 100, 
     21.transformOrigin: '50% 50%', 
     22.success: function (res) { 
     23.} 
     24.}); 
     25.setInterval(function() { 
     26.if (circleCount % 2 == 0) { 
     27.this.animationMiddleHeaderItem.scale(1.15).step(); 
     28.} else { 
     29.this.animationMiddleHeaderItem.scale(1.0).step(); 
     30.} 
     31.this.setData({ 
     32.animationMiddleHeaderItem: this.animationMiddleHeaderItem.export() 
     33.}); 
     34.circleCount++; 
     35.if (circleCount == 1000) { 
     36.circleCount = 0; 
     37.} 
     38.}.bind(this), 1000); 
     39.},

2、微信显示倒计时

wxml文件中：

1.[html] view plain copy
     2. 
     3.<view class="countDownTimeView countDownAllView" > 
     4.<view class="voteText countDownTimeText">{
        {countDownDay}}天</view> 
     5.<view class="voteText countDownTimeText">{
        {countDownHour}}时</view> 
     6.<view class="voteText countDownTimeText">{
        {countDownMinute}}分</view> 
     7.<view class="voteText countDownTimeText">{
        {countDownSecond}}秒</view> 
     8.</view>

js文件中：

1.[javascript] view plain copy
     2.Page( { 
     3.data: { 
     4.windowHeight: 654, 
     5.maxtime: "", 
     6.isHiddenLoading: true, 
     7.isHiddenToast: true, 
     8.dataList: {}, 
     9.countDownDay: 0, 
     10.countDownHour: 0, 
     11.countDownMinute: 0, 
     12.countDownSecond: 0, 
     13.}, 
     14.//事件处理函数 
     15.bindViewTap: function() { 
     16.wx.navigateTo( { 
     17.url: '../logs/logs' 
     18.}) 
     19.},
     20.onLoad: function() { 
     21.this.setData( { 
     22.windowHeight: wx.getStorageSync( 'windowHeight' ) 
     23.}); 
     24.}, 
     25.// 页面渲染完成后 调用 
     26.onReady: function () { 
     27.var totalSecond = 1505540080 - Date.parse(new Date())/1000; 
     28.var interval = setInterval(function () { 
     29.// 秒数 
     30.var second = totalSecond; 
     31.// 天数位 
     32.var day = Math.floor(second / 3600 / 24); 
     33.var dayStr = day.toString(); 
     34.if (dayStr.length == 1) dayStr = '0' + dayStr; 
     35.// 小时位 
     36.var hr = Math.floor((second - day * 3600 * 24) / 3600); 
     37.var hrStr = hr.toString(); 
     38.if (hrStr.length == 1) hrStr = '0' + hrStr; 
     39.// 分钟位 
     40.var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60); 
     41.var minStr = min.toString(); 
     42.if (minStr.length == 1) minStr = '0' + minStr; 
     43.// 秒位 
     44.var sec = second - day * 3600 * 24 - hr * 3600 - min*60; 
     45.var secStr = sec.toString(); 
     46.if (secStr.length == 1) secStr = '0' + secStr; 
     47.this.setData({ 
     48.countDownDay: dayStr, 
     49.countDownHour: hrStr, 
     50.countDownMinute: minStr, 
     51.countDownSecond: secStr, 
     52.}); 
     53.totalSecond--; 
     54.if (totalSecond < 0) { 
     55.clearInterval(interval); 
     56.wx.showToast({ 
     57.title: '活动已结束', 
     58.}); 
     59.this.setData({ 
     60.countDownDay: '00', 
     61.countDownHour: '00', 
     62.countDownMinute: '00', 
     63.countDownSecond: '00', 
     64.}); 
     65.} 
     66.}.bind(this), 1000); 
     67.}, 
     68.//cell事件处理函数 
     69.bindCellViewTap: function (e) { 
     70.var id = e.currentTarget.dataset.id; 
     71.wx.navigateTo({ 
     72.url: '../babyDetail/babyDetail?id=' + id 
     73.}); 
     74.} 
     75.})

效果图：

[![084928qf2aw6zi4x23xq44.jpg][]][084928qf2aw6zi4x23xq44.jpg][![084928qf2aw6zi4x23xq44.jpg][]][084928qf2aw6zi4x23xq44.jpg]

[Link 1]: http://9.cn
[084928qf2aw6zi4x23xq44.jpg]: /images/20220610/f4fce5b8b17d43d8b8a61fa98d3d2769.png