uni-app动画渲染

今天分享一个uni-app实现点赞+1的动画，效果如图：

直接把代码分享出来，我在代码中比较容易解释清楚

<template><view class="page"><view class="single-course" v-for="(item,index) in courseList" :key="item.id" ><view class="course-desc">{{item.name}}</view><view class="course-oper" @click="praiseMe(item.id)"><image src="../../static/icos/praise.png" class="praise-ico" ></image><view class="praise-me" >赞一下</view><!-- 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性 --><view :animation="animationData[item.id]" class="praise-me animation-opacity" >+1</view></view></view></view>
</template><script>export default {data() {return {courseList: [{id: 101,name: 'vue入门到精通'},{id: 102,name: 'React入门到入土'},{id: 103,name: 'Java基础'},{id: 105,name: '数据结构与算法'},{id: 106,name: '单片机应用'},{id: 107,name: 'STM32库函数开发'},{id: 108,name: '人工智能威胁论'},{id: 109,name: '小学一年级数学上册'}],animationData: {}, //动画实例初始化}},onLoad() {//页面加载时创建一个动画this.animation = uni.createAnimation();},methods: {//点赞praiseMe(id){//点击时，描绘动画的运动过程this.animation.translateY(-80).opacity(1).step({duration: 500});this.animationData = {};  //必须要清空，如果没有清空，引用是一样的，页面就不会重新渲染，导致动画无法显示。vue的特性this.animationData[id] = this.animation.export();  //导出动画，对应的键是当前数据的IDsetTimeout(()=>{  //时间到后，动画恢复原点this.animation.translateY(0).opacity(0).step({duration: 0})this.animationData = {};this.animationData[id] = this.animation.export();},500);},}}
</script><style>.single-course {display: flex;
}
.course-desc {line-height: 140upx;padding-left: 50upx;width: 440upx;
}
/* 点赞 */
.course-oper {width: 140upx;display: flex;flex-direction: column;justify-content: center;border-left: #dbdbda dashed 2px;
}
.praise-ico{width: 40upx;height: 40upx;align-self: center;
}
.praise-me {font-size: 14px;color: #feab2a;align-self: center;
}
.animation-opacity{font-weight: bold;color: #feab2a;opacity: 0;   /* 备注： 默认透明度为 0，不显示 */
}
</style>

uni-app动画渲染相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
iOS之深入探究动画渲染降帧
一.为什么要对动画降帧? 众所周知,刷新频率越高体验越好,对于 iOS app 的刷新频率应该是越接近越 60fps 越好,主动给动画降帧,肯定会影响动画的体验.但是另一方面,我们也知道动画渲染的过程 ...
iOS 视图，动画渲染机制探究
腾讯Bugly特约作者:陈向文终端的开发,首当其冲的就是视图.动画的渲染,切换等等.用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅.UI就是 App 的门面,它的体验 ...
Android动画渲染过程及原理(matrix),matrix动画，动画优化
-- 矩阵(Matrix), Matrix动画矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,最早来自于方程组的系数及常数所构成的方阵.在物理学中,矩阵于电路学.力学.光学和量子物理中都 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
炫云云渲染3ds max动画渲染使用教程
一.炫云官网注册账号二.在炫云官网下载客户端登录 1.安装需要的max插件炫云云渲染3ds max动画渲染使用教程三.打开场景提交 1.打开max场景并设置好参数.设置好输出路径,点击炫云,如图 ...
C4D学习笔记3-动画-动画渲染流程案例
学习教程: https://huke88.com/course/8787.html 动画渲染设置保存 1.工业模型渲染后带灯光的,直接加一个物理天空 2.工程设置模式-工程,修改帧率为30 3.修改 ...
DirectX12（D3D12）基础教程（十七）——让小姐姐翩翩起舞（3D骨骼动画渲染【1】）
目录 1.前言 2.本章代码简要说明 1.前言经过了一系列比较枯燥的命令行式的"外篇"系列教程后,这一篇起回归主干,继续我们的D3D12之旅,本章就利用已经学习的assimp ...
自定义动画渲染器 Interceptor
android 有系统的动画渲染器, 当然也可以实现自定义的动画渲染器. 要实现动画渲染器, 需要实现 android.vidw.animation.Interpolator 接口,这里以实现一个 ...

uni-app动画渲染

uni-app动画渲染相关推荐

最新文章

热门文章