图片转场效果库

878 阅读1分钟

基于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) 」创作共享协议,转载或使用请署名并注明出处。 相关说明 »