javascript - Paper.js 中的动画片段和位置
问题描述
我需要在多边形上开发 2 个动画:
- 每个段的自动旋转
- 多边形跟随鼠标移动
我正在尝试使用以下代码来做到这一点:
// onMouseMove
tool.onMouseMove = function (event) {
mousePoint = event.point;
};
// onFrame
view.onFrame = function (event) {
// Animation 1: Automatic circular rotation of each segment
for (var i = 0; i < polygon.segments.length; i++) {
var offsetRotation = new Point(Math.cos(event.time + i * 2), Math.sin(event.time + i * 2)).multiply(10);
polygon.segments[i].point = polygonCached.segments[i].point.add(offsetRotation);
}
// Animation 2: the polygon moves following the mouse movements with transition
var delta = mousePoint.subtract(polygon.position).divide(15);
polygon.position = polygon.position.add(delta);
};
这是整个代码:https ://codepen.io/anon/pen/YMgEEe?editors=0010
使用上面的代码,每个段的自动旋转都可以工作,并且多边形根本不跟随鼠标,也没有过渡。相反,评论自动旋转动画它正确地跟随鼠标过渡。
要检查转换是否有效,我将鼠标光标移到浏览器窗口之外,然后从另一点返回。现在,当多边形移动时,您将看不到任何过渡。
我哪里错了?
解决方案
也只需移动polygonCached
。
polygonCached.position = polygonCached.position.add(delta);
https://codepen.io/arthursw/pen/LvKPXo
多边形的缓存版本没有移动,因此每次旋转点时,它们的位置都会重置。
推荐阅读
- .net - 如何在 IHostBuilder 扩展中访问 IServiceProvider?
- python - 离线python包安装报错
- css - sr-only 类导致页面滚动
- ffmpeg - FFmpeg - 向视频添加动画 gif(通过蒙版裁剪)
- angular - Angular - 发送多个请求而不等待所有
- html - 在 Angular 中遇到动态表单问题并显示正确的信息
- overflow - 铸造原始值
- javascript - 检查数字的最后一位
- ruby - Rails 5x 模型购物车实例,必须链接到用户
- html - 无法在 cdk-virtual-scroll-viewport 中删除 mat-horizontal 步进导航