基于canvas实现的包括卷轴，激光镭射，百叶窗，齿合，堆积等40余种图片转场过渡效果集合。

支持效果

• Random 随机
• PullInUp 向上扩展
• PullInDown 向下扩展
• PullInLeft 向左扩展
• PullInRight 向右扩展
• ZoomIn 中间向外扩展
• ZommInX 左右扩展
• ZoomInY 上下扩展
• SlideInUp 向上平移
• SlideInDown 向下平移
• SlideInLeft 向左平移
• SlideInRight 向右平移
• PressInUp 向上压缩
• PressInDown 向下压缩
• PressInLeft 向左压缩
• PressInRight 向右压缩
• PressInX 左右压缩
• PressInY 上下压缩
• UncoverFromTop 向下展开卷轴
• UncoverFromBottom 向上展开卷轴
• ShutterX 水平百叶窗
• ShutterY 垂直百叶窗
• ZoomFullScreen 变焦全屏
• Wheel 轮子
• Tooth 上下齿合
• FadeIn 淡入
• FadeOut 淡出
• StackInTop 向上堆积
• StackInBottom 向下堆积
• StackInLeft 向左堆积
• StackInRight 向右堆积
• TopLaser 上镭射
• BottomLaser 下镭射
• RightLaser 右镭射
• LeftLaser 左镭射

如何使用

Example

Html

<div id="canvas"></div>
<script src="dist/mo.effects.c79ef24.js"></script>
<script>
window.MoEffects.animate(document.getElementById('canvas'), 'https://smohan.oss-cn-beijing.aliyuncs.com/test/boy-child-cute-35537.jpg', {
 width: 500,
 height: 500,
 duration: 2000,
 easing: 'linear',
 type: 'UncoverFromTop'
})
</script>

API

animate(el: HTMLElement, img: string | HTMLImageElement | File, options?: Props)

Options

{
  // 动画类型
  type: EffectType
  // 特效时长, 单位毫秒
  duration: number
  // 容器宽度
  width?: number
  // 容器高度
  height?: number
  // 缓动类型
  easing?: TweenHandler
}

-- EOF --

本文标题：图片转场效果库

本文链接：https://smohan.net/blog/effects

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »