小程序动画 animation 的常规使用
公司小程序项目比较多,最近正好有时间看一下小程序的动画,同时记录一下我的学习过程;看到这个文章的,我建议你之间去小程序后台:https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
1、使用
// wxml 代码
<view animation="{{move}}">小程序动画</view>//js
onLoad() {this.load()
},
load(){
//初始化let move = wx.createAnimation({duration:1000, timingFunction:"ease-in-out"})move.backgroundColor("#ccc").translateY(100).rotate(360).step()this.setData({move:move.export()})
},
duration:持续时间
timingFunction:动画效果
delay:延迟时间
transformOrigin:动画原点
2、相关方法
1、backgroundColor() :设置背景色(“red”);
2、bottom():设置 bottom 的值,传入 number 则默认使用 px;
3、left():设置 left 的值;
4、right():设置 right 的值;
5、top():设置 top 的值;
6、width():设置 width 的值;
7、height():设置 height 的值;
8、opacity():设置透明度(0-1);
1、rotate():旋转,选择角度范围 [-180, 180];
2、rotateX():从 X 轴顺时针旋转一个角度;
3、rotateY():从 Y 轴顺时针旋转一个角度;
4、rotateZ():从 Z 轴顺时针旋转一个角度;
5、rotate3d():上面三个的缩写(x,y,z,angle);
6、scale():缩放(x,y);
7、scaleX():X 轴的缩放倍数;
8、scaleY():Y 轴的缩放倍数;
9、scaleZ():Z 轴的缩放倍数;
10、scale3d():上面三个的缩写(x,y,z);
11、transkate():平移;
12、transkateX():在 X 轴平移的距离,单位为 px;
13、transkateY():在 Y轴平移的距离,单位为 px;
14、transkateZ():在 Z 轴平移的距离,单位为 px;
15、transkate3d():上面三个的缩写(x,y,z) [-180, 180];
16、skew():对 X、Y 轴坐标进行倾斜(x,y);
17、skewX():对 X 轴坐标进行倾斜;
18、skewY():对 Y 轴坐标进行倾斜;
1、export():导出动画队列;export 方法每次调用后会清掉之前的动画操作;
2、step():表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画;类似 wx.createAnimation;
matrix 和 matrix3d 可以参考:https://blog.csdn.net/weixin_43867717/article/details/122036846
load(){let move = wx.createAnimation({duration:1000,timingFunction:"ease-in-out"})move.left(200).scale(1).skew(30,0).step({duration:500,timingFunction:"ease"})move.scale(0.7).skew(0,0).step({duration:500,timingFunction:"ease"})this.setData({move:move.export()})},
相关文章:
小程序动画 animation 的常规使用
公司小程序项目比较多,最近正好有时间看一下小程序的动画,同时记录一下我的学习过程;看到这个文章的,我建议你之间去小程序后台:https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimati…...

Swift 周报 第三十四期
文章目录 前言新闻和社区iPhone Pro 要提价!新款 iPhone 或会使用 USB-C 充电器,边框更薄与 App Store 专家会面交流让你的 App 和游戏在 visionOS 模拟器外更进一步 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swif…...

[虚幻引擎] UE DTBase64 插件说明 使用蓝图对字符串或文件进行Base64加密解密
本插件可以在虚幻引擎中使用蓝图对字符串,字节数组,文件进行Base64的加密和解密。 目录 1. 节点说明 String To Base64 Base64 To String Binary To Base64 Base64 To Binary File To Base64 Base64 To File 2. 案例演示 3. 插件下载 1. 节点说…...

Jmeter组件作用域及执行顺序
目录 一、Jmeter八大可执行元件 二、组件执行顺序 三、组件作用域 四、特殊说明 一、Jmeter八大可执行元件 配置元件---Config Element 用于初始化默认值和变量,以便后续采样器使用。配置元件大其作用域的初始阶段处理,配置元件仅对其所在的测试树分…...
题目:2309.兼具大小写的最好英文字母
题目来源: leetcode题目,网址:2309. 兼具大小写的最好英文字母 - 力扣(LeetCode) 解题思路: 遍历字符串以获得兼具大小写的英文字母,然后返回最大者或空串即可。 解题代码: c…...

RISC-V公测平台发布:如何在SG2042上玩转OpenMPI
About HS-2 HS-2 RISC-V通用主板是澎峰科技与合作伙伴共同研发的一款专为开发者设计的标准mATX主板,它预装了澎峰科技为RISC-V高性能服务器定制开发的软件包,包括各种标准bencmark、支持V扩展的GCC编译器、计算库、中间件以及多种典型服务器应用程序。…...

Jenkins 使用
Jenkins 使用 文章目录 Jenkins 使用一、jenkins 任务执行二、 Jenkins 连接gitee三、Jenkins 部署静态网站 一、jenkins 任务执行 jenkins 创建 job job的名字最好是有意义的 restart_web_backend restart_web_mysql[rootjenkins ~]# ls /var/lib/jenkins/ config.xml …...

使用go-zero快速构建微服务
本文是对 使用go-zero快速构建微服务[1]的亲手实践 编写API Gateway代码 mkdir bookstore && cd bookstorego mod init bookstore mkdir api && goctl api -o api/bookstore.api syntax "v1"info(title: "xx使用go-zero"desc: "xx用…...

Java开发 - Redis事务怎么用?
前言 最近博主感觉捅了Redis窝,从Redis主从,哨兵,集群,集群原理纷纷讲了一遍,不知道大家都学会了多少,想着送佛送到西,不如再添一把火,所以今天带给大家的博客是Redis事务ÿ…...
Windows Server 2019安装使用PostgreSQL 15
主要是参考这篇文章来做的: Windows11安装配置PostgreSQL(图文详细教程)_win11安装postgres 并管理工具_return strxi的博客-CSDN博客 1. 下载的是postgresql 15.3 windows x64-86版本 Community DL Page 2. 安装时一定要右击安装exe文件…...

中科驭数亮相DPU峰会,分享HADOS软件生态实践和大数据计算方案,再获评“匠芯技术奖”
又是一年相逢时,8月4日,第三届DPU峰会在北京开幕,本届峰会由中国通信学会指导,江苏省未来网络创新研究院主办,SDNLAB社区承办,以“智驱创新芯动未来”为主题,沿袭技术创新、生态协同的共创效应&…...
chrome、edge、Firefox关闭音量提醒控件显示
文章目录 1. Chrome2. edge3. firefox 1. Chrome 在地址栏输入: chrome://flags/#hardware-media-key-handling 将Hardware Media Key Handling的状态设为Disabled 2. edge 在地址栏输入 edge://flags/#hardware-media-key-handling 将Hardware Media Key Handling的状态…...

3.7v升压5v4A芯片用什么型号
问:我需要一个能够将3.7V锂电池的电压升压到5V,并且能够提供4A的电流输出的芯片。请问有什么推荐的型号吗? 答:小编为您推荐AH6922B芯片,它具备以下特点来满足您的需求: 1. 输入电压范围适配:…...

鉴源实验室丨SOME/IP协议安全攻击
作者 | 张昊晖 上海控安可信软件创新研究院工控网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 01 引 言 随着汽车行业对于数据通信的需求不断增加,SOME/IP作为支持汽车以太网进程和设备间通信的一种通信协议应…...

什么?200?跨域?
情景复现 今天我遇到了一件很奇怪的事情就是,当我请求后端网关,然后通过网关去请求相应的服务,都进行了跨域处理 但是,奇怪的是我在请求的时候,回来的响应码是200,但是报错了,报的还是200的同…...

【数据结构与算法——TypeScript】算法的复杂度分析、 数组和链表的对比
【数据结构与算法——TypeScript】 算法的复杂度分析 什么是算法复杂度(现实案例)? ❤️🔥 前面已经解释了什么是算法? 其实就是解决问题的一系列步骤操作、逻辑。 ✅ 对于同一个问题,我们往往有很多种解决思路和方法&#x…...

搜索综合训练
搜索综合训练 选数详细注释的代码 小木棍详细注释的代码 费解的开关详细注释的代码 选数 详细注释的代码 #include <iostream> #include <vector>using namespace std;// 判断一个数是否为素数 bool isPrime(int num) {if (num < 1)return false;// 判断从2到s…...
snowboy+新一代kaldi(k2-fsa)sherpa-onnx实现离线语音识别【语音助手】
背景 本系列主要目标初步完成一款智能音箱的基础功能,包括语音唤醒、语音识别(语音转文字)、处理用户请求(比如查天气等,主要通过rasa自己定义意图实现)、语音合成(文字转语音)功能。 语音识别、语音合成采用离线方式实现。 语…...

APT80DQ20BG-ASEMI快恢复二极管80A 200V
编辑:ll APT80DQ20BG-ASEMI快恢复二极管80A 200V 型号:APT80DQ20BG 品牌:ASEMI 芯片个数:双芯片 封装:TO-3P 恢复时间:≤50ns 工作温度:-55C~150C 浪涌电流:600A*2 正向电流…...

Go的任务调度单元与并发编程
摘要:本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 本文主要介绍Go语言、进程、线程、协程的出现背景原因以及Go 语言如何解决协程的…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...

九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...

回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...