animateInView()

如果可拖拽元素位于容器外部，则将其动画移动到视口内。

参数

名称	类型	描述
duration^(可选)	`数字`	动画的持续时间 (默认值 `350`)
gap^(可选)	`布尔值`	可拖拽元素应动画移动到容器边缘的额外距离
ease^(可选)	`ease`	应用于动画的缓动函数 (默认值 `InOutQuad`)

返回值

可拖拽对象自身

animateInView() 代码示例

import { createDraggable } from 'animejs';

const [ $animateInView ] = utils.$('.animate-button');

const draggable = createDraggable('.square', {
  container: '.grid',
});

const animateInView = () => {
  draggable.animateInView(400, 16);
}

// Set the draggable position outside the container
draggable.x = -24;
draggable.y = 72;

$animateInView.addEventListener('click', animateInView);

<div class="medium padded show-bounds grid square-grid animate-in-view">
  <div class="square draggable"></div>
</div>
<div class="large row">
  <fieldset class="controls">
    <button class="button animate-button">Animate in view</button>
  </fieldset>
</div>

上一个 下一个