Skip to content

Bezier Curve Plugin and GSAP Animation Basics Tutorial #30

@Seasons123

Description

@Seasons123

BezierPlugin

import BezierPlugin from 'ad/animation/SingleAnim/plugin/BezierPlugin';
SingleAnim.plugins.push(BezierPlugin);
<SingleAnim animation={{
  bezier: { 
    type: 'soft', 
    autoRotate: true,
    vars: [
      { x: 150, y: 150 },
      { x: 300, y: 0 },
      { x: 450, y: 150 },
      { x: 600, y: 0 },
    ],
  }}}
/>

参数 类型 默认 说明

type	                string	soft	       类型    thru soft quadratic cubic
autoRotate	        boolean   false	      跟随旋转
vars	                array	null	    贝赛尔点的位置,如 { x:100, y:100}

贝赛尔曲线 API 参照

相关参考:
BezierPlugin插件(js/jquery)--模拟曲线贝塞尔运动、绘制曲线的实用插件
Bezier曲线原理

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions