用户
 找回密码
 立即注册

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. 邀请
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: MacleChen 来自: csdn

相关阅读