微信小程序开发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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
全选复选框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
php防止SQL注入详解及防范
2013/11/12 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
layui复选框的全选与取消实现方法
2019/09/02 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
文秘专业毕业生就业推荐信
2013/11/08 职场文书
银行求职信个人范文
2013/12/16 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
平安建设汇报材料
2014/12/29 职场文书
学术会议通知
2015/04/15 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Python简易开发之制作计算器
2022/04/28 Python