微信小程序开发animation心跳的动画效果代码实例详解

1、微信小程序开发animation心跳动画

<view class="bottomViewItem">     <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value">      <view class="bottomMiddleHeaderItem" animation="{{animationMiddleHeaderItem}}">      <!-- 心跳 -->      <view class="bottomMiddleHeaderItemSubView">       <image src="/images/detail_vote_heart.png" style="width:32rpx; height:32rpx;" animation="{{animationMiddleHeaderItem}}"></image>      </view>      <!-- 投票文字 -->      <view class="bottomMiddleHeaderItemSubView">投票</view>      </view>     </view>    </view>

js文件中：

// 页面渲染完成    onReady: function () {     var circleCount = 0;     // 心跳的外框动画     this.animationMiddleHeaderItem = wx.createAnimation({     duration:1000, // 以毫秒为单位     /**     * http://cubic-bezier.com/#0,0,.58,1     * linear 动画一直较为均匀     * ease 从匀速到加速在到匀速     * ease-in 缓慢到匀速     * ease-in-out 从缓慢到匀速再到缓慢     *     * http://www.tuicool.com/articles/neqMVr     * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过     * step-end 保持 0% 的样式直到动画持续时间结束  一闪而过     */     timingFunction: 'linear',     delay: 100,     transformOrigin: '50% 50%',     success: function (res) {     }     });     setInterval(function() {     if (circleCount % 2 == 0) {      this.animationMiddleHeaderItem.scale(1.15).step();     } else {      this.animationMiddleHeaderItem.scale(1.0).step();     }     this.setData({      animationMiddleHeaderItem: this.animationMiddleHeaderItem.export()     });     circleCount++;     if (circleCount == 1000) {      circleCount = 0;     }     }.bind(this), 1000);    },

2、微信显示倒计时

wxml文件中：

<!--倒计时 -->    <view class="countDownTimeView countDownAllView" >    <view class="voteText countDownTimeText">{{countDownDay}}天</view>    <view class="voteText countDownTimeText">{{countDownHour}}时</view>    <view class="voteText countDownTimeText">{{countDownMinute}}分</view>    <view class="voteText countDownTimeText">{{countDownSecond}}秒</view>    </view>

Page( {    data: {    windowHeight: 654,    maxtime: "",    isHiddenLoading: true,    isHiddenToast: true,    dataList: {},    countDownDay: 0,    countDownHour: 0,    countDownMinute: 0,    countDownSecond: 0,    },    //事件处理函数    bindViewTap: function() {    wx.navigateTo( {     url: '../logs/logs'    })    },    onLoad: function() {    this.setData( {     windowHeight: wx.getStorageSync( 'windowHeight' )    });    },    // 页面渲染完成后 调用    onReady: function () {    var totalSecond = 1505540080 - Date.parse(new Date())/1000;    var interval = setInterval(function () {     // 秒数     var second = totalSecond;     // 天数位     var day = Math.floor(second / 3600 / 24);     var dayStr = day.toString();     if (dayStr.length == 1) dayStr = '0' + dayStr;     // 小时位     var hr = Math.floor((second - day * 3600 * 24) / 3600);     var hrStr = hr.toString();     if (hrStr.length == 1) hrStr = '0' + hrStr;     // 分钟位     var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);     var minStr = min.toString();     if (minStr.length == 1) minStr = '0' + minStr;     // 秒位     var sec = second - day * 3600 * 24 - hr * 3600 - min*60;     var secStr = sec.toString();     if (secStr.length == 1) secStr = '0' + secStr;     this.setData({     countDownDay: dayStr,     countDownHour: hrStr,     countDownMinute: minStr,     countDownSecond: secStr,     });     totalSecond--;     if (totalSecond < 0) {     clearInterval(interval);     wx.showToast({      title: '活动已结束',     });     this.setData({      countDownDay: '00',      countDownHour: '00',      countDownMinute: '00',      countDownSecond: '00',     });     }    }.bind(this), 1000);    },    //cell事件处理函数    bindCellViewTap: function (e) {    var id = e.currentTarget.dataset.id;    wx.navigateTo({     url: '../babyDetail/babyDetail?id=' + id    });    }   })

效果图：

以上就是微信小程序开发animation心跳的动画效果代码实例详解的详细内容，更多内容请关注技术你好其它相关文章！