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


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 相关文章推荐
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
js数组去重的hash方法
Dec 22 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js微信支付实现代码
2016/12/22 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
浅谈Fetch 数据交互方式
2018/12/20 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python实现二叉树的遍历
2017/12/11 Python
python爬虫基本知识
2018/03/05 Python
Django实现分页显示效果
2019/10/31 Python
如何基于python实现脚本加密
2019/12/28 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
python 基于opencv操作摄像头
2020/12/24 Python
Ibatis如何调用存储过程
2015/05/15 面试题
护士在校生自荐信
2014/02/01 职场文书
教师个人自我鉴定
2014/02/08 职场文书
学习两会精神心得范文
2014/03/17 职场文书
世界环境日活动总结
2015/02/11 职场文书
少先队中队工作总结
2015/08/14 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
家访教师心得体会
2016/01/23 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
MySQL查询日期时间
2022/05/15 MySQL