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


Posted in Javascript onAugust 16, 2017

本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下

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

wxml文件中:

<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>

js文件中:

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心跳动画效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
vue实现单选和多选功能
Aug 11 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
详解jenkins自动化部署vue
May 14 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 #Javascript
微信小程序自定义模态对话框实例详解
Aug 16 #Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 #Javascript
JavaScript实现三级联动菜单效果
Aug 16 #Javascript
ionic3 懒加载
Aug 16 #Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 #Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
NET程序员上机面试题
2015/05/23 面试题
学生自我评语大全
2014/04/18 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
搞笑婚前保证书
2015/02/28 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis