3dRotateYControl

Features

  • 🚀 动画更新基于requestAnimationFrame
  • 🧭 仅支持Y轴方向旋转控制;
  • 🪆 需要附带“根据不同范围内的旋转角度,能够自动过渡到水平位置”的惯性/重力感旋转效果;(从平面视角来看,需要达到[0,90),松手后回到 0 弧度位置;(90,180],松手后回到 PI 弧度位置的旋转过度效果)
  • 👬 同时支持 PC 和移动端;
  • 从指定角度开始归零的旋转过渡动画;
  • 支持初始化时制定任意展示角度;
  • 点击/双击回到初始角度;

Usage

basic

import rotateCtrl from "3dRotateYControl";

/**
* RotateControl(targetDom, targetRadius);
* targetDom 需要控制的元素
* targetRadius 目标元素的半径(宽度的一半,影响手指或鼠标滑动元素时的敏感度),默认200px
*/

let targetDom = document.querySelector("#badge_stage");
let rotateCtrl = new RotateControl(targetDom);
let isTouching = false;
// 添加监听事件,目前只有一个`update`事件可供监听,并在回调内更新「徽章badgeMesh.rotation.y」
rotateCtrl.on(
  "update",
  ({ rad, onTouch, positiveRad, speed, startRad, endRad }) => {
    isTouching = onTouch;
    badgeMesh && (badgeMesh.rotation.y = rad);
  }
);

// 开始监听旋转控制返回的数据
rotateCtrl.listen();

Advance

/**
* rotateCtrl.reset(duration, resetRad);
* duration 过渡时间ms,默认500
* resetRad 制定重置的角度,默认0
*/

// 比如想在1000ms里,从PI开始重置到0,可以这么用!
rotateCtrl.reset(0, PI);
rotateCtrl.reset(1000, 0);

Todos

  • 模拟Apple Watch徽章松手后的摆动->停止的过渡效果
  • 完成freezePage函数:手指/鼠标控制目标元素转动时,禁止页面scrollY
  • 删除playAmt函数:第一个版本,能够实现小摆动,但是停住的时机不够精准;

GitHub

View Github