[uni-app] uni.createAnimation动画在APP端无效问题记录

最新推荐文章于 2024-08-09 14:39:55 发布

iOSTianNan

最新推荐文章于 2024-08-09 14:39:55 发布

阅读量750

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/iOSTianNan/article/details/136858721

版权

博客详细记录了在uni-app中使用uni.createAnimation创建的动画在APP端失效的问题。问题源于JavaScript限制，Vue无法检测数组直接索引赋值或修改长度。解决方案是在data中添加数组变量，通过改变数组状态实现动画效果。文章附带了模板代码示例和git改进截图。

摘要由CSDN通过智能技术生成

文章目录

- uni.createAnimation
- - 动画描述
  - 动画代码
  - - template
    - js部分
  - 问题原因
  - 改进方案
  - - template
  - js部分
  - 改动
  - git 改进截图

uni.createAnimation

动画描述

实现一个以左上角为锚点,以Z轴做平面抬起及落下的动画效果

动画代码

template

					<image v-if="showHot(item.cname)" :animation="animationData" :key="item.cname"
						src="https://cdn.xxx.com/static/cert/course_fire_icon2.png" mode="">
					</image>

js部分

			initAnimation() {
   
				this.animation = uni.createAnimation({
   
					transformOrigin: "0% 100%",
					duration: 500,
					timingFunction: 'e

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iOSTianNan

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决animate在uniapp中不生效的问题

m0_56101323的博客

06-04

4191

1.打开animate.css文件并修改以下内容： :root { –animate-duration: 1s; –animate-delay: 1s; –animate-repeat: 1; } 修改为: page { –animate-duration: 1s; –animate-delay: 1s; –animate-repeat: 1; } 图片显示已经改好。 2.运行自己想要的动画就可以显示了，第一个参数是固定，第二个参数是效果，还有循环次数，延迟等参数，具体查官网文档 ...

uniapp动画的爬坑之路---动画不生效

木贝西的博客

07-27

5696

uniapp官网案例动画不生效，动画事件必须写在view标签上写在div无效 <view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view> export default{ data: { animationData: {} }, onShow: function(){ var animation = uni.createAnima

参与评论您还未登录，请先登录后发表或查看评论

uniapp如何封装一个好用的动画组件

最新发布

uv86e1的博客

08-09

476

描述如何在uniapp-vue3中使用animate.css编写一个全端可用的动画组件，实现页面动态效果

解决：微信小程序使用createanimation无效

dx_zheng的博客

05-25

2918

解决微信小程序上定义动画createanimation无效开发项目过程中，想要这样一个动画效果：写一个气泡，有动弹效果（类似呼吸，一直动），点击之后移动至消失。一开始我在气泡元素上面定义了一个动弹动画：下一步就要写点击事件之后的另一个移动至消失的动画了。 //wxml <view id="pra-bubble" animation="{{animation}}" bindtap="onClick"> //js //定义动画，https://developers.weixin.qq

[uni-app ] uni.createAnimation二次失效问题处理

apple_50717761的博客

03-22

392

搞了一上午的动画，查了很多博客，如果旋转是以中心点为锚点的话可以这样做，亲测有效。

uniapp - animation动画数组无效

shenpapa的博客

03-09

1621

问题描述：在开发uniapp时发现，在使用数组来存储动画的场景下动画总是不生效通过多次尝试发现 1. 在方法中临时创建的animation实例导出的数据不是reactive的 2. 数组并没有监控到元素对象的变动解决方法把animation实例定义在data中，在onload中初始化，在方法中使用，可以解决这个问题猜想原因可能是在data中的animation实例会被vue监控，从而触发animation实例导出数据的监控。后面有待确认其原因 export default { d

uni.createAnimation创建动画

m0_58753305的博客

07-13

1899

uniapp中创建动画可以使用css的@keyframes，或者canvas，本文是使用uni.createAnimation。如何想要点击后触发动画，可以在script增加函数methods，将动画复制过去就能实现。下面是使用@keyframes。

基于Uni-app+Node.js音乐听歌系统的设计与实现

06-06

主要创新工作：采用Uni-app + Node分离式开发模式，简化前后端交互；开发者通过uni-app编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uni-app项目zip.zip

02-11

uni-app是一种基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在多个平台上运行，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序等。这个压缩包可能包含了开发uni-app应用所需的全部组成...

微信小程序-uni-app实现案例.zip

10-27

1. **一套代码，多端运行**：uni-app的核心优势在于其强大的兼容性，开发者只需要编写一次代码，就可以在多个平台上运行，大大提高了开发效率。 2. **组件化开发**：uni-app采用了Vue.js的组件化思想，每个页面都是...

这是一个动画示例程序, 实现淡入淡出，缩放，移动，旋转

10-13

这是一个动画示例程序, 实现淡入淡出，缩放，移动，旋转详情请参见： http://blog.csdn.net/aduovip/article/details/6406466

适用于uni-app的socket.io封装，可用于uni-app、微信小程序.zip

01-05

微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好...

uni-app快速入手 ——（5）项目实战一自定义组件+组件传值，uni.createAnimation()在app中如果是数组渲染的话无效果解决

csl125的博客

04-21

2273

在项目搭建中可能某一模块频繁使用，这样为了方便组件的复用性，就可以单独建一个组件使用本文说演示示例是一个评分打星星组件一、首先在项目中建文件名称为components uni-app组件目录和vue项目一样在components新建组件 starComp.vue <template name="helloComp"> <view> <vie...

uni.createAnimation创建一个旋转动画，只能执行一次

weixin_48198334的博客

04-10

429

后来又用setInterval每隔一个周期就把旋转角度加180度，发现运行一段时间后动画逐渐崩坏，应该是动画的周期和定时器的周期时间没有完全吻合导致的。本来想用uni.createAnimation创建一个旋转动画，发现转完一圈后就不动了，没法循环旋转，最后采用了下面的这种方式，直接用CSS来实现循环旋转动画。

小程序使用uni.createAnimation(OBJECT)实现点赞动画

LzzMandy的博客

04-16

4483

思路：在页面创建的时候，创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候，清除动画数据 <template> <view class="content"> <view class="item" v-for="(item,ind...

uni-app 动画

单飞吧的博客

03-08

1312

基础布局添加 :animation=“animationData” <view class="login-title" :animation="animationData"> <view class="title-text">测试</view> </view> 使用 uni.createAnimation ,调用动画操作方法后要调用 step() 来表示一组动画完成,export 方法每次调用后会清掉之前的动画操作，更多参数请查看官网 data() {

uni-app animation动画