微信小程序開發效果：animation心跳動畫

時間 2019-12-07

標籤微信程序開發效果 animation 心跳動畫简体版

原文原文鏈接

一、微信小程序開發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文件中：javascript

 25.
 31.
 34.
 39.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.});setInterval(function() { 
 26.if (circleCount % 2 == 0) { 
 27.this.animationMiddleHeaderItem.scale(1.15).step(); 
 28.} else { 
 29.this.animationMiddleHeaderItem.scale(1.0).step(); 
 30.}this.setData({ 
 32.animationMiddleHeaderItem: this.animationMiddleHeaderItem.export() 
 33.});circleCount++; 
 35.if (circleCount == 1000) { 
 36.circleCount = 0; 
 37.} 
 38.}.bind(this), 1000);},

二、微信顯示倒計時html

wxml文件中：java

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文件中：小程序


 25.
 28.
 31.
 35.
 39.
 43.
 47.
 68.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.},// 頁面渲染完成後 調用 
 26.onReady: function () { 
 27.var totalSecond = 1505540080 - Date.parse(new Date())/1000;var interval = setInterval(function () { 
 29.// 秒數 
 30.var second = totalSecond;// 天數位 
 32.var day = Math.floor(second / 3600 / 24); 
 33.var dayStr = day.toString(); 
 34.if (dayStr.length == 1) dayStr = '0' + dayStr;// 小時位 
 36.var hr = Math.floor((second - day * 3600 * 24) / 3600); 
 37.var hrStr = hr.toString(); 
 38.if (hrStr.length == 1) hrStr = '0' + hrStr;// 分鐘位 
 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;// 秒位 
 44.var sec = second - day * 3600 * 24 - hr * 3600 - min*60; 
 45.var secStr = sec.toString(); 
 46.if (secStr.length == 1) secStr = '0' + secStr;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.},//cell事件處理函數 
 69.bindCellViewTap: function (e) { 
 70.var id = e.currentTarget.dataset.id; 
 71.wx.navigateTo({ 
 72.url: '../babyDetail/babyDetail?id=' + id 
 73.}); 
 74.} 
 75.})

效果圖：微信小程序