EaseJs 中 regX / regY 的用法

Chase620
• 阅读 1168

EaseJs 中 regX / regY 的用法

EaseJs 中 regX / regY 的用法

by 凹凸曼-大力士 on 2020-11-05

动效开发过程中总会遇到中心点设置问题,本文介绍了EaseJS中regX/regY设置中心点的用法。

前情提要

动效开发中最常用的基本变形动作就是缩放、旋转等,该变形会涉及到中心点的设置。由于我们采用了createJs中的easeJs库进行图形绘制,这个时候我们就会用到regX/regY。下面先看一个小demo:

我们先在页面中画一个100x100的矩形,并放置在canvas中间,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { useRef, useEffect } from "react";
import { Power0, TweenMax as Tween } from "gsap";
import { Stage, Shape, Graphics, Ticker } from "@createjs/easeljs";
import "./App.css";
function MotionDemo() {
const canvasRef = useRef(null);
Tween.ticker.fps(24);
useEffect(() => {
canvasRef.current.width = 400;
canvasRef.current.height = 400;
let stage;
window.stage = stage = new Stage(canvasRef.current);
const graphics =
new Graphics().beginFill("#0ff").drawRect(0, 0, 100, 100);
const shape = new Shape(graphics);
window.stage.addChild(shape);
//将矩形放置在canvas中
shape.x = 150;
shape.y = 150;
shape.alpha = 0.3;
Ticker.on("tick", e => {
stage.update();
});
}, []);
return (
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<div style={{ position: "absolute", left: "10%", top: "20%" }}>
<canvas className="canvas" ref={canvasRef} width={200} height={200} />
</div>
</div>
);
}
export default MotionDemo

效果如下:
EaseJs 中 regX / regY 的用法

^_^ 继续说回regX/regY什么是regX/regY

官方文档解释:

regX: The left offset for this display object’s registration point.即该显示对象注册点的左偏移量。

regY: The y offset for this display object’s registration point.即该显示对象注册点的上偏移量。

需要明确的是:

regX/regY为正时,对象往左上偏移;regX/regY为负,则向右下偏移。
现在我们让中间的矩形动起来,向useEffect 底部添加如下代码:

1
2
3
4
5
Tween.to(shape, 2, {
rotation: 360,
repeat: -1,
ease: Power0.easeNone,
})

效果如下:
EaseJs 中 regX / regY 的用法

很显然我们能发现,该对象的注册点即左顶点。

设置regX/regY绕图形中心旋转

官方说明:

For example, to make a 100x100px Bitmap rotate around its center, you would set regX and regY to 50.让一个100x100的矩形,围绕起中心点旋转,则需要将regX/regY设为50.

现在我们设置regX/regY,显示对象宽度/高度的一半(100 / 2 = 50), 为了对比,我们新增一个同位置的矩形,(在useEffect底部添加)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const createShape = () => {
const graphics = new Graphics() .beginFill("#0f0")
.drawRect(0, 0, 100, 100);
const shape = new Shape(graphics);
shape.x = 150;
shape.y = 150;
shape.regX = 50;
shape.regY = 50;
window.stage.addChild(shape);
Tween.to(shape, 2, {
rotation: 360,
repeat: -1,
ease: Power0.easeNone
});
};
createShape();

效果如下:
EaseJs 中 regX / regY 的用法

淡蓝色的为该矩形原本的位置,设置regX/regY后,可知图形确实是绕中心旋转。只是该矩形位置发生了偏移,我们需要调整显示对象的位置,将其位置还原为初始状态并围绕中心旋转。

1
2
3
//将createShape中shape的位置往右下调整shape宽度的一半
shape.x += 50
shape.y += 50

效果如下:
EaseJs 中 regX / regY 的用法

设置任意旋转中心
现在我们清楚了,regX/regY会改变显示对象的注册点位置,并使该对象位置发生偏移。那我们可以很简单的利用这一特性和显示对象的x,y属性联合使用达到我们的目的。
举个例子:现在我们想让矩形绕其右上顶点旋
利用regX/regY ,使其绕右顶点旋转
利用x, y将偏移后的对象还原至初始位置
代码如下:

1
2
3
4
5
6
7
// 第一步实现,将旋转中心移至右顶点
shape.regX = 100
shape.regY = 0

// 第二步实现,设置x,y将显示对象移回初始位置
shape.x += 100
shape.y = 0

效果如下:
EaseJs 中 regX / regY 的用法

依靠上面拆分的办法,我们就可以将旋转中心设置为该显示对象上的任意一点啦。
(大家会不会因此迷糊 如果旋转中心不在显示对象上该如何处理,下面也做一下说明)

举个例子:现在我们希望矩形绕【画布的左顶点】旋转。

  • 利用regX/regY将显示对象注册点调整为画布左顶点。
  • 利用x,y将显示对象还原至初始位置

所以 其实和旋转中心在显示对象上是一致的。

1
2
3
4
5
6
7
// 第一步
shape.regX = -150
shape.regY = -150

// 第二步
shape.x -= 150
shape.y -= 150

效果如下:(速率调快了,方便看效果)
EaseJs 中 regX / regY 的用法

总结:

regX/regY会改变其旋转中心,并伴随显示对象位置偏移(相对于原显示对象而言)

当显示对象存在缩放和旋转时,情况会不会不同呢?

  • 有缩放的情况

给显示对象设置缩放值

1
shape.scale = 0.5;

设置中心点:

1
2
3
4
5
6
7
// 第一步实现,设置显示对象注册点偏移至中心点处
shape.regX = (width / 2) * scale
shape.regY = (height / 2) * scale

// 第二步实现,设置x/y将显示对象偏移到原来的位置,
shape.x += (width / 2) * scale
shape.y += (height / 2) * scale

EaseJs 中 regX / regY 的用法
很显然,位置计算并不正确。因为缩放不会影响注册点所在坐标系。
调整regX/regY取值

1
2
shape.regX = width / 2
shape.regY = height / 2

则得到绕中心点旋转结果,效果如下:
EaseJs 中 regX / regY 的用法

  • 有旋转的情况

给显示对象本身设置旋转角度

1
2
3
4
5
6
7
shape.rotation = 30;

//处理中心点设置
shape.regX = width / 2
shape.regY = height / 2
shape.x += width / 2
shape.y += height / 2

EaseJs 中 regX / regY 的用法

即:显示对象的旋转,不会影响旋转中心的设置

总结:

regX/regY、x/y配合使用可以设置任意中心点。另外通过旋转和缩放两种情况中心点的设置和效果可知:缩放在中心点设置之前就已生效所以缩放是以其左顶点进行缩放,而旋转是在设置完中心点之后生效,所以其是绕其中心点进行旋转的。额外需要注意的是,当设完中心点,对象经过旋转动效后,如需要将中心点重置为左顶点时。此时注册点的偏移量重置为0。但x, y的位置需要通过旋转公式求出旋转后左顶点的坐标,而不是单纯的还原位置。

EaseJs

经验分享

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2020/11/05/easeJs-center-setting/

上次更新:2021-02-02 15:48:05

React 入门儿

node.js 沙盒逃逸分析

var gitalkOpts={id:"bm90ZXMvMjAyMC8xMS8wNS9lYXNlSnMtY2VudGVyLXNldHRpbm",owner:"o2team",repo:"o2team.github.io",title:"EaseJs 中 regX / regY 的用法",body:"https://aotu.io/notes/2020/11/05/easeJs-center-setting/index.html\\n\\n动效开发过程中总会遇到中心点设置问题,本文介绍了EaseJS中regX/regY设置中心点的用法。",clientID:"3c4d153e6874260f9c7e",clientSecret:"dd44012504c6168bc05b9266e0554bb28c62ce15",admin:\["mamboer"\]}

本文转自 https://aotu.io/notes/2020/11/05/easeJs-center-setting/,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实