当前位置: 首页 > news >正文

uni-app使用CSS实现无限旋转动画

本来想用uni.createAnimation创建一个旋转动画,发现转完一圈后就不动了,没法循环旋转,

后来又用setInterval每隔一个周期就把旋转角度加180度,发现运行一段时间后动画逐渐崩坏,应该是动画的周期和定时器的周期时间没有完全吻合导致的。

<image :animation="animationData" class="music_img_flag" src="../../static/images/musicflag.png"></image>
	var animation = uni.createAnimation({duration: 2000,timingFunction: "linear"});this.stopAnimation()this.timer = setInterval(() => {this.timeNum += 180;animation.rotate(this.timeNum).step();console.log('timeCheck:', this.timeNum)this.animationData = animation.export();}, 2000);

最后采用了下面的这种方式,直接用CSS来实现循环旋转动画。

<view class="music_img_flag"><image src="../../static/images/musicflag.png"></image>
</view>
<style lang="scss" scoped>.music_img_flag {position: absolute;top: 202rpx;width: 88rpx;height: 88rpx;image {width: 100%;height: 100%;animation: animal 2s infinite linear;-webkit-animation: animal 2s infinite linear;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;}@keyframes animal {0% {transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);}}}
</style>

相关文章:

uni-app使用CSS实现无限旋转动画

本来想用uni.createAnimation创建一个旋转动画&#xff0c;发现转完一圈后就不动了&#xff0c;没法循环旋转&#xff0c; 后来又用setInterval每隔一个周期就把旋转角度加180度&#xff0c;发现运行一段时间后动画逐渐崩坏&#xff0c;应该是动画的周期和定时器的周期时间没有…...

java面向对象(八)

文章目录 一、abstract关键字的使用1.概念2. abstract修饰类:抽象类3.abstract修饰方法&#xff0c;抽象方法4.abstract使用上的注意点&#xff1a;5.抽象类的匿名子类 二、计算一段代码执行所花费的时间三、接口的使用1.接口的使用2.定义接口中的成员3.代码demo4.Java类可以实…...

【proverif】proverif的下载安装和初使用

文章目录 一、proverif下载1. 下载proverif安装包2. 解压proverif安装包3. 点开其中的README&#xff0c;安装graphciz和gtk4. 查看安装是否成功5. 测试 一、proverif下载 1. 下载proverif安装包 官网&#xff1a;proverif 首先下载全过程无需开外网&#xff0c;而且安装包下…...

浙江大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许

浙江大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许...

Centos7.9 一键脚本部署 LibreNMS 网络监控系统

前言&#xff1a; LibreNMS 是个以 PHP/MySQL 为基底的自动探索网络监控系统 LibreNMS 官网 版本23.8.2-52-g7bbe0a2 - Thu Sep 14 2023 22:33:23 GMT0700数据库纲要2023_09_01_084057_application_new_defaults (259)Web 服务器nginx/1.20.1PHP8.1.23Python3.6.8DatabaseMa…...

【大数据之Kafka】十六、Kafka集成外部系统之集成Flume

Flume 是一个在大数据开发中非常常用的组件。可以用于 Kafka 的生产者&#xff0c;也可以用于 Kafka 的消费者。 Flume安装和部署&#xff1a;https://blog.csdn.net/qq_18625571/article/details/131678589?spm1001.2014.3001.5501 1 Flume生产者 &#xff08;1&#xff09…...

java学习--day3 (运算符、if循环、switch-case结构)

文章目录 今天的内容1.运算符1.1关系运算符1.2逻辑运算符1.3逻辑运算符的短路原则 2.分支结构【重点】2.1if分支2.2if-else分支2.3if-else的嵌套写法2.4if-else if 分支结构2.5swicth-case结构 扩展知识点 1.八大基本数据类型整型: byte short int long浮点: float double字…...

ActiveMQ、RabbitMQ、RocketMQ、Kafka区别

一、消息中间件的使用场景 消息中间件的使用场景总结就是六个字&#xff1a;解耦、异步、削峰 1.解耦 如果我方系统A要与三方B系统进行数据对接&#xff0c;推送系统人员信息&#xff0c;通常我们会使用接口开发来进行。但是如果运维期间B系统进行了调整&#xff0c;或者推送…...

csp初赛总结 那些年编程走过的坑 初高中信竞常考语法算法点

&#x1f618;个人主页&#xff1a;曲终酣兴晚的小书屋&#x1f496; &#x1f615;作者介绍&#xff1a;一个莽莽撞撞的&#x1f43b; &#x1f496;专栏介绍&#xff1a;日常生活&往事回忆 &#x1f636;‍&#x1f32b;️每日金句&#xff1a;祝大家心有山水不造作&…...

DollarTree(美元树)验厂需要注意哪些方面?

【DollarTree&#xff08;美元树&#xff09;验厂需要注意哪些方面&#xff1f;】 美元树&#xff08;Dollar tree&#xff09;&#xff0c;是美国的一元店。每件商品都只卖一美元&#xff0c;吃的、用的和玩的应有尽有。美元树在美国共拥有4900家门店&#xff0c;其中一半的连…...

vector使用和模拟实现

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…...

token登录的实现

token登录的实现 我这种token只是简单的实现token&#xff0c;就是后端利用UUID 生成简单随机码&#xff0c;利用随机码作为在Redis中的键&#xff0c;然后存储的用户信息作为值&#xff0c;在每次合理请求的时候对token的有效时间进行刷新&#xff08;利用拦截器&#xff09;&…...

GO语言从入门到实战-Go语言课程介绍

为什么选择 Go 语言来完成这么大一个项目呢&#xff1f;我们不妨回到 Go 语言的源头看一看。 Go 语言的初步设想始于 2007 年&#xff0c;当时 Go 语言的三位创始人是想通过开发一种新型的语言来解决 Google 在软件开发中面临的问题&#xff1a; 多核硬件架构&#xff1b;超大…...

七天学会C语言-第六天(指针)

1.指针变量与普通变量 指针变量与普通变量是C语言中的两种不同类型的变量&#xff0c;它们有一些重要的区别和联系。 普通变量是一种存储数据的容器&#xff0c;可以直接存储和访问数据的值。&#xff1a; int num 10; // 定义一个整数型普通变量num&#xff0c;赋值为10在例…...

2023年腾讯云轻量服务器测评:16核 32G 28M 配置CPU测试

腾讯云轻量应用服务器16核32G28M配置优惠价3468元15个月&#xff08;支持免费续3个月/送同配置3个月&#xff09;&#xff0c;轻量应用服务器具有100%CPU性能&#xff0c;系统盘为380GB SSD盘&#xff0c;28M带宽下载速度3584KB/秒&#xff0c;月流量6000GB&#xff0c;折合每天…...

macos (M2芯片)搭建flutter环境

安装的版本3.13.4、电脑上没有安装过android studio、安装过brew 1.在终端运行sudo softwareupdate --install-rosetta --agree-to-license&#xff0c;下图展示安装成功的效果 2.下载以下安装包来获取最新的 stable Flutter SDK 3.解压&#xff0c;⚠️注意下载安装sdk的包名…...

Xilinx FPGA未使用管脚上下拉状态配置(ISE和Vivado环境)

文章目录 ISE开发环境Vivado开发环境方式1&#xff1a;XDC文件约束方式2&#xff1a;生成选项配置 ISE开发环境 ISE开发环境&#xff0c;可在如下Bit流文件生成选项中配置。 右键点击Generate Programming File&#xff0c;选择Process Properties&#xff0c; 在弹出的窗口选…...

数据结构---链表(java)

目录 1. 链表 2. 创建Node 3. 增加 4. 获取元素 5. 删除 6. 遍历链表 7. 查找元素是否存在 8. 链栈的实现 9. 链队的实现 1. 链表 数据存放在"Node"结点中 优点&#xff1a;不用考虑扩容和缩容的问题&#xff0c;实现了动态存储数据 缺点&#xff1a;没有…...

Qt --- Day02

实现效果&#xff1a; 点击登录&#xff0c;检验用户密码是否正确&#xff0c;正确则弹出消息框&#xff0c;点击ok转到另一个页面 不正确跳出错误消息框&#xff0c;默认选线为Cancel&#xff0c;点击Yes继续登录 点击Cancel跳出问题消息框&#xff0c;默认选项No&#xff0c…...

Redis 集合(Set)快速指南 | Navicat

Redis 支持通过多种数据类型来存储项目集合。其中&#xff0c;包括列表、集合和哈希。上周的博文介绍了列表&#xff08;List&#xff09;数据类型并重点介绍了一些用于管理列表&#xff08;List&#xff09;的主要命令。在今天的文章中&#xff0c;我们将转向关注集合&#xf…...

Python 3.15 JIT为何在Docker中静默禁用?揭开musl libc与libffi-3.4.6 ABI不兼容的致命链

第一章&#xff1a;Python 3.15 JIT 的设计目标与 Docker 场景适配性Python 3.15 引入的实验性 JIT&#xff08;Just-In-Time&#xff09;编译器并非追求通用性能提升&#xff0c;而是聚焦于特定高价值场景——尤其是容器化微服务中反复执行的 CPU 密集型工作负载。其核心设计目…...

避开这些坑!Sigma-Delta调制器设计中最容易忽略的5个稳定性问题(附MASH级联实测数据)

避开这些坑&#xff01;Sigma-Delta调制器设计中最容易忽略的5个稳定性问题&#xff08;附MASH级联实测数据&#xff09; 在高速高精度ADC设计中&#xff0c;Sigma-Delta调制器因其优异的噪声整形特性成为首选方案。但当工程师们沉浸在理论计算的理想世界时&#xff0c;实验室示…...

水墨江南模型Agent智能体开发:自主中式艺术创作助手

水墨江南模型Agent智能体开发&#xff1a;自主中式艺术创作助手 最近在捣鼓AI绘画&#xff0c;发现一个挺有意思的事儿。很多朋友想用AI画点有中国风味的作品&#xff0c;比如水墨画、山水画&#xff0c;但往往折腾半天&#xff0c;出来的效果总差那么点意思。要么是意境不对&…...

Java中正确比较数组最小值的两种方法

本文旨在解决Java Stream 当API使用min()方法获得数组最小值时&#xff0c;返回optionalint类型导致的直接比较错误。我们将深入探讨这个问题的根源&#xff0c;并提供两个有效的解决方案&#xff1a;一是比较Optionalint的getasint()方法&#xff0c;二是引入apache Commons N…...

Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享)

Label Studio实战&#xff1a;如何为NLP项目自定义标注模板&#xff08;含模板代码分享&#xff09; 在自然语言处理项目中&#xff0c;数据标注的质量往往直接决定模型性能的上限。Label Studio作为当前最主流的开源标注工具之一&#xff0c;其灵活的自定义模板功能让NLP工程师…...

vLLM-v0.17.1实战案例:为AI编程助手提供毫秒级代码补全服务

vLLM-v0.17.1实战案例&#xff1a;为AI编程助手提供毫秒级代码补全服务 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;其核心目标是提供极致的推理速度和易用性。这个项目最初由加州大学伯克利分校的天空计算实验室开发&#xff0c;…...

ViGEmBus如何解决Windows游戏控制器兼容性难题?

ViGEmBus如何解决Windows游戏控制器兼容性难题&#xff1f; 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus ViGEmBus是一款专业的Windows内核模式驱动程序&a…...

物理海洋学入门:从海浪到海流,一文搞懂海水运动的7种形式

物理海洋学入门&#xff1a;从海浪到海流&#xff0c;一文搞懂海水运动的7种形式 海洋覆盖了地球71%的表面积&#xff0c;这片蔚蓝的水域从未停止过运动。当我们站在海边&#xff0c;看着潮起潮落、浪花拍岸&#xff0c;或许会好奇&#xff1a;这些看似简单的海水运动背后&…...

vLLM与SGLang多模型统一API部署实战指南

1. 为什么需要多模型统一API部署 在实际生产环境中&#xff0c;我们经常会遇到需要同时部署多个AI模型的场景。比如一个智能客服系统可能需要同时支持问答、情感分析和文本摘要等多个功能&#xff0c;每个功能背后可能对应不同的模型。如果每个模型都单独部署一套服务&#xff…...

百度网盘提速全攻略:从限速对抗到效能优化的实战指南

百度网盘提速全攻略&#xff1a;从限速对抗到效能优化的实战指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 诊断限速瓶颈&#xff1a;从协议层破解速度封印 原理图解&am…...