用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

Rolan 2017-8-12 08:14

1、微信小程序开发animation心跳动画wxml文件中: view plain copyview class="bottomViewItem" view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value" view class="bottomMiddleHeaderItem" ...

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. })

效果图:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: MacleChen 来自: csdn

相关阅读