微信小程序实现渐入渐出动画效果


Posted in Javascript onJune 13, 2019

前言

在做小程序列表展示的时候,接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图:

微信小程序实现渐入渐出动画效果

需要在进入列表页的时候,依次展示每一条卡片,在展示完成后需要隐藏掉当天之前的卡片。

实现思路

实现该动画效果,首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的,以及考虑到展示完成后的隐藏效果,所以动画效果需要用js动态去添加。在看了微信开发文档后,发现微信小程序提供了Animation的一个动画对象,具体看了里面的参数后发现,是可以实现需求上的效果的。具体使用如下api:

wx.createAnimation(Object object) 创建一个animation对象。最后通过动画实例的export方法导出动画数据传递给组件的 animation 属性。里面有如下参数:duration(动画持续时间,单位 ms),timingFunction(动画的国度效果),delay(动画延迟)

创建的animation对象,本次实现过程中需要用到如下属性:

Animation.export() 可以导出动画队列,export 方法每次调用后会清掉之前的动画操作。
Animation.step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。比如一组动画结束了,就以step()结尾
Animation.translateY(number translation) 在 Y 轴平移的距离,单位为 px
Animation.opacity(number value) 透明度 0-1的取值范围

看到上面这些属性,合理使用的话,那么实现需求提到动画效果那是稳稳的。

实现步骤

封装一个方法,用来创建动画,并方便调用

/**
 * 动画实现
 * @method animationShow
 * @param {that} 当前卡片
 * @param {opacity} 透明度
 * @param {delay} 延迟
 * @param {isUp} 移动方向
 */
 animationShow: function (that,opacity, delay, isUp) {
 let animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: delay
 });
 <!--考虑到还需要隐藏掉当天之前的卡片,做如下判断来赋予不同的动画效果-->
 if (isUp == 'down') {
  animation.translateY(0).opacity(opacity).step().translateY(-80).step();
 } else if (isUp == 'up') {
  animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
 } else {
  animation.translateY(0).opacity(opacity).step()
 }
 let params = ''
 params = animation.export()
 return params
 },

初始化每个卡片的样式

首先每个卡片的位置相对于自身往Y轴平移80像素,并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。

.init{
 opacity: 0;
 transform: translateY(-80px)
}

处理数据

循环处理每一条数据,通过调用封装的方法,来获得该卡片应该拥有的动画属性

for (let i = 0; i < transData.length; i++) {
 if (i == 0) {
  transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
 } else {
  transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
 }
 }

给每个卡片附加animation属性

<view class="init" animation="{{item.animation}}">

实现效果

微信小程序实现渐入渐出动画效果

跟设计视频中的动画风格基本保持一致,美滋滋。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
深入了解JavaScript代码覆盖
Jun 13 #Javascript
js使用cookie实现记住用户名功能示例
Jun 13 #Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
You might like
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
python批量修改文件后缀示例代码分享
2013/12/24 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python MySQLdb使用教程详解
2018/03/20 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
十佳美德少年事迹材料
2014/02/05 职场文书
单位租房协议书范本
2014/12/04 职场文书
受资助学生感谢信
2015/01/21 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle