uniapp 动画的实现

效果图：

官方文档

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

<template><view><view class="ani" :animation="animationData" @click="rotateThenScale"></view><view class="love" :animation="animationData1"><image src="../../static/love.png" ></image></view>       </view>
</template><script>export default {data() {return {animation:'',animationData: {},animationData1: {}}},onShow: function() {var animation = uni.createAnimation({             duration: 1000,timingFunction: 'ease'             })this.animation = animationsetTimeout(() => {//放大4倍，旋转45度animation.scale(4, 4).rotate(45).step()this.animationData = animation.export()},1000)setTimeout(() => {//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。animation.translate(84,26).step()this.animationData = animation.export()             }, 2000)/* 心跳效果 */var animation1 = uni.createAnimation({duration: 450,timingFunction: 'linear',delay: 1          })var next = truesetInterval(() => {if (next) {animation1.scale(1.15).step() } else {animation1.scale(0.85).step()}next = !next;this.animationData1 = animation1.export()}, 500)},methods: {         rotateAndScale: function() {// 旋转同时缩小this.animation.rotate(90).scale(0.5, 0.5).step()this.animationData = this.animation.export()},rotateThenScale: function() {// 先旋转后放大this.animation.rotateZ(45).step()this.animation.scaleX(2, 2).step()this.animationData = this.animation.export()},rotateAndScaleThenTranslate: function() {// 先旋转同时放大，然后平移this.animation.rotate(45).scale(2, 2).step()this.animation.translate(100, 100).step({duration: 1000})this.animationData = this.animation.export()}}}
</script><style>.ani{background:red;height:100rpx;width:100rpx;}.love{      height:200rpx;width:200rpx;margin-left: 360rpx;}image{height:200rpx;width:200rpx;}</style>

uniapp 动画的实现相关推荐

uni-app动画渲染
今天分享一个uni-app实现点赞+1的动画,效果如图: 直接把代码分享出来,我在代码中比较容易解释清楚 <template><view class="page" ...
uni-app 动画
基础布局添加 :animation="animationData" <view class="login-title" :animation=" ...
uni-app animation动画
uni.createAnimation(OBJECT) 官方文档官方是这么描述animation动画的过程: 创建一个动画实例 animation.调用实例的方法来描述动画.最后通过动画实例的exp ...
uni-app小程序利用动画做出左右滑动切换的效果
需求:场景类似驾校刷题,手指从左往右大幅度滑动切换至上一题,手指从右往左大幅度滑动切换至下一题.已答题目直接显示正确与否和答案状态,所选答案不存在后端,后端只保存该题是否答过.答对还是答错的状态.获取 ...
uniApp的基本教程
1.底部导航的相关配置配置tabBar // pages.json,图标必须为图片底部导航的图片文件要放入static {..."tabBar": {"selected ...
uniapp 微信小程序转盘指针抽奖
转盘抽奖uniapp小程序,跟搜到的插件转盘旋转不同,我们的需求是中间的指针也就是瓶子旋转,而且要求长摁蓄力液体装满瓶子,松手旋转并且液体慢慢转为空,最后停止在相应的奖品上. 首先考虑蓄力液体装满的问 ...
uniapp中使用svga动画
1.首先什么是svga动画 SVGA(http://svga.io/index.html) 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Flutter / Web. SVGA ...
uni-app中自定义图表（canvas实现chart图表）开发篇（5）-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬.另外也在第四篇基础上,对图形略作修改.在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.req ...
uniapp抽奖组件-动画效果之各类抽奖（跳跃）
欢迎使用ay-lottery插件最近对抽奖感兴趣,整理插件代码如下: 1.ay-lottery插件可去uniapp插件市场的动画效果之各类抽奖(跳跃)页面下载. 前言简介: 1.抽奖效果组件: ...

uniapp 动画的实现

效果图：

官方文档

uniapp 动画的实现相关推荐

最新文章

热门文章