#coffeescript
class Animate
constructor:(options={})->
@options = options
options.duration = options.duration or 300
self = this
self.easing =
swing: (p, n, firstNum, diff) ->
((-Math.cos(p * Math.PI) / 2) + 0.5) * diff + firstNum
linear: (p, n, firstNum, diff) ->
firstNum + diff * p
start : ->
options=@options
self=this
self.startTime = +new Date
self.interval = setInterval(->
action = self.step or option.step
t = +new Date
n = t - self.startTime
if n < options.duration
self.state = n / options.duration
self.pos = self.easing[options.easing or "swing"](self.state, n, 0, 1, options.duration)
action self.pos
else
clearInterval self.interval
# when open new tab the interval will seted to 1000ms in chrome and firefox
action 1
complete = self.complete or options.complete
complete() if complete
return
, 13)
return
stop : ->
options=@options
self=this
clearInterval self.interval if self.interval
onStop = self.onStop or options.onStop
onStop() if onStop
return
window.Animate = Animate
#coffeescript
#use animate
scrollable=(opts)->
defaults={vertical:false}
setting={}
result={}
(->(setting[x]=item for x,item of defaults);return)()
(->(setting[x]=item for x,item of opts);return)()
if setting.vertical
pDim = 'top'
pSize = setting.container.offsetHeight
else
pDim = 'left'
pSize = setting.container.offsetWidth
operateDom = setting.container.children[0]
animate = new Animate()
index=0
currentVal=0
targetVal=0
animate.step = (progress)->
distance = targetVal - currentVal
operateDom.style[pDim] = - (currentVal + distance * progress) + 'px'
return
animate.complete = ()->
currentVal = targetVal
# operateDom.style[pDim] = -currentVal + 'px'
return
result.seekTo = (i)->
animate.stop()
targetVal = i * pSize
animate.start()
index = i
if setting.onSeek
setting.onSeek()
return
result.onSeek = (fun)->
setting.onSeek=fun
return
result.getIndex = ()->
index
result
window.scrollable = scrollable
分享到:
相关推荐
animate css最新4.1.1文件打包下载 制作前端动画效果,GitHub搬运方便下载
最新animate.css文件,解压后将里面的animate.css放入vscode即可
animate动画特效重复调用animate动画特效重复调用animate动画特效重复调用
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Animate.css是某位大牛写好的动画效果集合,需要的时候可以直接下载导入到项目中,在需要的元素上添加相关的类即可使用相对应的动画效果。
Toon Boom Animate Pro 2 汉化 1.1 注意:复制文件之前注意备份原始英文文件(复制原始英文 etc 和 resources 文件夹到别的路径作为备份,然后再复制汉化文件直接覆盖到软件相应目录即可。如果以后想用英文版,只...
swiper.animate.js是swiper提供的swiper结合animate的工具,然而他在vue中使用的话需要做一些修改.只是做了部分修改能使用了就可以了没有做什么大神的工厂模式各种设计,也没那能力.哈哈哈哈,反正能用,我是能用.
多媒体应用基础所要求的 animate动画 绩点还不错 4.6 因为多个文件,所以就压缩了,上传的是rar文件。 下载后用win.rar解压了就好。 包括: 平时作业 期末作业,也就是animate动画源程序 《多媒体应用基础》(公选)...
基于vue移动端项目,修改后的swiper.animate.min.js文件,因为官方源码不支持 AMD/CMD/UMD 用法,具体请查看我博客相关文章
《Animate CC 2017动画制作入门与进阶》课件
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...
Animate Sections(剖切动画)插件可以自动的为所选SketchUp模型组自动制作剖切生长动画效果,简化了动画的制作过程,非常的简单快捷。支持SketchUp2014-2016 更多免费SU插件下载网站-SU插件百科:...
Saola Animate Professional 2021 Getintopc概述 特别是,Saola Animate Professional 2021是一个交互式应用程序,用户可以通过它创建令人惊叹的HTML5动画和web内容。最后,用户可以与汽车关键帧工作,可以自动生成...
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
课件资源等--Animate动画设计与制作项目教程.zip
Adobe Animate CC Classroom in a Book 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除
AnimateCC二维动画设计与制作-课程标准.pdf
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
Jquery的animate实例 主要用到了animate方法
jquery animate小用例,jquery animate小用例