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.})
效果图：
