微信小程序动画和Canvas笔记

server/2025/1/16 1:12:51/

小程序>微信小程序动画和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.ppmy.cn/server/47670.html

相关文章

java项目使用jsch下载ftp文件

pom <dependency><groupId>com.jcraft</groupId><artifactId>jsch</artifactId><version>0.1.55</version> </dependency>demo1&#xff1a;main方法直接下载 package com.example.controller;import com.jcraft.jsch.*; im…

进程间通信(27000字超详解)

&#x1f30e;进程间通信 文章目录&#xff1a; 进程间通信 进程间通信简介       进程间通信目的       初识进程间通信       进程间通信的分类 匿名管道通信       认识管道       匿名管道       匿名管道测试       管道的四种…

OpenCV学习(4.1) 改变颜色空间

1.目标 在本教程中&#xff0c;你将学习如何将图像从一个色彩空间转换到另一个&#xff0c;像BGR↔灰色&#xff0c;BGR↔HSV等除此之外&#xff0c;我们还将创建一个应用程序&#xff0c;以提取视频中的彩色对象你将学习以下功能&#xff1a;cv2.cvtColor&#xff0c;**cv2.i…

LeetCode刷题 | Day 2 最长严格递增或递减子列表(Longest Increasing or Decreasing SubList)

LeetCode刷题 | Day 2 最长严格递增或递减子列表(Longest Increasing Decreasing SubList) 文章目录 LeetCode刷题 | Day 2 最长严格递增或递减子列表(Longest Increasing Decreasing SubList)前言一、题目概述二、解题方法2.1 动态规划思想2.1.1 思路讲解2.1.2 伪代码 + 逐…

云计算-高级云资源配置(Advanced Cloud Provisioning)

向Bucket添加公共访问&#xff08;Adding Public Access to Bucket&#xff09; 在模块5中&#xff0c;我们已经看到如何使用CloudFormation创建和更新一个Bucket。现在我们将进一步更新该Bucket&#xff0c;添加公共访问权限。我们在模块5中使用的模板&#xff08;third_templ…

Jenkins常用插件与应用详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Jenkins是一个平台我们通过安装插件来解决我们想要完成的任务 1、Jenkins常用插件 Allure&#…

竹纤维家装元宇宙:虚拟空间与绿色生活的融合

在全球化和科技迅速发展的今天&#xff0c;元宇宙作为一种全新的互联网应用和社会形态&#xff0c;正逐步渗透到人们生活的各个方面。特别是在家装行业&#xff0c;竹纤维作为一种新型环保材料&#xff0c;结合元宇宙的概念&#xff0c;正在引领一场绿色生活的革命。 ### 一、…

JavaSE——【逻辑控制】(知识)

目录 前言 一、顺序结构 二、分支结构 三、循环结构 总结 前言 公元 3050 年&#xff0c;地球的科技已经发展到令人难以想象的地步。这天&#xff0c;艾米莉在自己的房间里启动了最新的虚拟旅行装置&#xff0c;下一秒&#xff0c;她发现小奥奇的博客更新了。立即放弃了虚…