微信小程序动画和Canvas笔记

微信小程序动画和Canvas

动画

使用wx.createAnimation创建动画对象

// 创建动画对象
const animation = wx.createAnimation({duration: 1000, // 动画持续时间timingFunction: 'ease', // 动画速度曲线delay: 0, // 动画延迟时间transformOrigin: '50% 50% 0', // 动画的中心点
});

动画方法
animation.opacity(value).step(): 设置透明度
animation.scale(valueX, valueY).step(): 设置缩放
animation.rotate(deg).step(): 设置旋转角度
animation.translate(x, y).step(): 设置平移距离
animation.skew(ax, ay).step(): 设置倾斜角度

应用动画

// 应用动画到指定组件上
this.setData({animationData: animation.export(),
});

示例

// 创建动画对象
const animation = wx.createAnimation({duration: 1000,timingFunction: 'ease',
});
// 设置动画
animation.translateX(100).rotate(45).step();// 应用动画
this.setData({animationData: animation.export(),
});

Canvas
使用Canvas绘制图形

// 获取Canvas上下文对象
const context = wx.createCanvasContext('myCanvas');// 绘制矩形
context.setFillStyle('#FF0000');
context.fillRect(0, 0, 100, 100);// 绘制圆形
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.setFillStyle('#00FF00');
context.fill();
context.closePath();// 绘制文本
context.setFillStyle('#0000FF');
context.setFontSize(20);
context.fillText('Hello Canvas', 50, 150);// 绘制图片
context.drawImage('imagePath', 0, 0, 100, 100);
// 绘制到Canvas
context.draw();

Canvas事件

canvasId.tap: 点击事件
canvasId.touchstart: 触摸开始事件
canvasId.touchmove: 触摸移动事件
canvasId.touchend: 触摸结束事件
canvasId.longtap: 长按事件

2.3. 示例

<canvas canvas-id="myCanvas" bindtap="canvasTap" style="width: 300px; height: 200px;"></canvas>
Page({canvasTap: function (e) {console.log('Canvas tapped!');},
});

以上就是我整理的一些微信小程序动画和Canvas的笔记!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

error /var/lib/jenkins/workspace/*/node_modules/node-sass: Command failed.

原因&#xff1a;node-sass版本不一致 版本图&#xff1a; 解决方案&#xff1a; 进入到jenkins项目目录下&#xff0c;修改package.json文件 将7.0.1改成6.0.1版本

【python深度学习】——pytorch中tensor的view、resize(resize_)与reshape

TOC 1. view() view()方法具有以下特性&#xff1a; 它只能在tensor是连续的时候使用&#xff08;可以调用is_contiguous()方法查看tensor是否连续&#xff09;, 如果要对不连续的张量使用&#xff0c; 需要先使用.contiguous()使其在内存上连续。view()方法不改变tensor的s…

Python自建chatgpt服务器:使用Flask实现类似Chat服务器流式API接口

引言 使用Flask框架可以轻松实现一个类似chatgpt流式响应的接口&#xff0c;该接口通过POST请求接收prompt和history参数&#xff0c;分别对应为聊天系统的提示词和对话历史&#xff0c;server则给予server-sent event (SSE)返回聊天系统的响应。 服务端 开发前的思考 我们…

【LeetCode每日一题】3067. 在带权树网络中统计可连接服务器对数目-DFS和图

Hey我的编程小伙伴们&#x1f44b;&#xff0c;今天我要和大家分享一道我在LeetCode上遇到的超有趣的题目——编号3067的“在带权树网络中统计可连接服务器对数目”。这是一道非常适合练习DFS和图的题目哦&#xff01;&#x1f913;&#x1f4bb; 邻接图是什么&#xff1f; 在…

2024.05.22 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | TP-LINK 2025届提前批校园招聘正式启动 校招 | TP-LINK 2025届提前批校园招聘正式启动 2、实习 | 航空工业一飞院2024年实习生招聘正式启动&#xff01; 实习 | 航空工业一飞院…

为Ubuntu 14.04升级 Kernel V4.4的内核

1&#xff1a;下载2个文件 wget https://kernel.ubuntu.com/mainline/v4.4-wily/linux-headers-4.4.0-040400-generic_4.4.0-040400.201601101930_amd64.deb wget https://kernel.ubuntu.com/mainline/v4.4-wily/linux-image-4.4.0-040400-generic_4.4.0-040400.201601101930_…

构建LangChain应用程序的示例代码:14、使用LangChain、GPT和Activeloop的Deep Lake来处理代码库

使用LangChain、GPT和Activeloop的Deep Lake来处理代码库 在本教程中 我们将使用Langchain Activeloop的Deep Lake与GPT一起分析LangChain本身的代码库。 设计 准备数据&#xff1a; 使用langchain_community.document_loaders.TextLoader上传所有Python项目文件。我们将…

【加密与解密】【03】加密系统

术语 RSA&#xff0c;加密算法&#xff0c;同时也是一个公司的名称&#xff0c;该公司制定了PKCS公钥加密标准PKI&#xff0c;Public Key Infrastructure&#xff0c;公钥基础设施PKCS&#xff0c;Public Key Cryptography Standards&#xff0c;公钥加密标准X.509&#xff0c…

模式识别选择题

影响K-均值聚类算法效果的主要因素之一是什么&#xff1f; A. 初始聚类中心的选取 B. 样本输入顺序 C. 模式相似性测度 D. 分类准则 答案&#xff1a;A支持向量机&#xff08;SVM&#xff09;在处理非线性问题时&#xff0c;通常使用什么方法&#xff1f; A. 引入核函数 B. 增加…

真的太太太难顶顶顶了!!!为了微信群发消息,我写了一个自动化脚本

真的太太太难顶顶顶了&#xff01;&#xff01;&#xff01;为了微信群发消息&#xff0c;我写了一个自动化脚本 最近真的太难顶了&#xff0c;要给微信几十个同学发同样的消息&#xff0c;我一共才十个手指&#xff0c;怎么可能扛得住这么造&#xff0c;真太伤身体了&#xf…

离线html文件及资源文件夹转换为单个mhtml文件

离线html文件及资源文件夹转换为单个mhtml文件 一、前言二、转换过程2.1mhtml文件简介2.2关键要点2.2.1boundary的使用2.2.2Content-Transfer-Encoding的选择2.2.3Content-Location 2.3转换代码 一、前言 旧版本的谷歌浏览器保存网页时默认只有两个选项&#xff0c;一个是网页…

鸿蒙Ability Kit(程序框架服务)【UIExtensionAbility】

UIExtensionAbility 概述 [UIExtensionAbility]是UI类型的ExtensionAbility组件&#xff0c;需要与[UIExtensionComponent]一起配合使用&#xff0c;开发者可以在UIAbility的页面中通过UIExtensionComponent嵌入提供方应用的UIExtensionAbility提供的UI。UIExtensionAbility会…

匈牙利匹配算法

一 什么是匈牙利匹配算法 匈牙利算法是一种解决二分图最大匹配问题的算法。在二分图中&#xff0c;将左边的点称为X集合&#xff0c;将右边的点称为Y集合&#xff0c;我们需要在X集合和Y集合之间建立一个双向边集合&#xff0c;使得所有的边都不相交。如果我们能够找到一个最大…

力扣669,修剪二叉搜索树

669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNo…

19. FreeRTOS 直接任务通知当邮箱使用

FreeRTOS中任务通知作为邮箱的使用 引言 在嵌入式系统开发中&#xff0c;任务间的通信是非常重要的一部分。FreeRTOS提供了多种任务间通信的方式&#xff0c;如队列、信号量、事件标志组等。然而&#xff0c;这些通信方式可能会带来一些额外的开销。为了提供一种更高效的通信…

C++ Thread多线程并发记录(8)生产者-消费者模型与信号量(条件变量)

一.生产者-消费者模型 生产者-消费者模型是一个十分经典的多线程并发协作模式。所谓的生产者-消费者&#xff0c;实际上包含了两类线程&#xff0c;一种是生产者线程用于生产数据&#xff0c;另一种是消费者线程用于消费数据&#xff0c;为了解耦生产者和消费者的关系&#xff…

Opencv 色彩空间

一 核心知识 色彩空间变换&#xff1b; 像素访问&#xff1b; 矩阵的、-、*、、&#xff1b; 基本图形的绘制 二 颜色空间 RGB&#xff1a;人眼的色彩空间&#xff1b; OpenCV默认使用BGR&#xff1b; HSV/HSB/HSL; YUV(视频); 1 RGB 2 BGR 图像的多种属性 1 访问图像(Ma…

人工智能大模型的进化之路:探索如何让它们变得更“聪明”

一、引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;大模型凭借其强大的处理能力和广泛的应用前景&#xff0c;已经成为研究的热点。然而&#xff0c;尽管这些模型在多个领域展现出了惊人的能力&#xff0c;但它们仍然面临着理解力、泛化能力和适应性等方面的挑战…

学习Java的日子 Day51 数据库,DDL,DML

Day51 MySQL 1.数据库 数据库&#xff08;database&#xff09;就是一个存储数据的仓库。为了方便数据的存储和管理&#xff0c;它将数据按照特定的规律存储在磁盘上。通过数据库管理系统&#xff0c;可以有效地组织和管理存储在数据库中的数据 MySQL就是数据库管理系统&#…

VisionPro界面乱序或字体排版异常,字体不适应界面窗口大小

很多人在安装Visionpro后都遇到了一个界面显示异常的问题&#xff1a; 打开visionpro后字体大小不统一,显示不全或显示在其他窗口之上&#xff0c;如下所示。 解决该问题&#xff0c;首先关闭Visionpro软件&#xff0c;右击软件选择属性->兼容性。勾选兼容模式下面的方框。…