#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.min.css是一个非常实用的CSS库,专门用于创建各种丰富的动画效果。这个库是由开发者Daniel Eden精心设计和编写的,它极大地简化了在Web开发中添加动态视觉效果的过程。通过在HTML元素上简单地应用预定义的...
Animate.css 是一个强大的开源CSS动画库,它提供了一系列预先定义好的动画效果,使得开发者无需从零开始编写复杂的CSS代码,就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计,提升用户体验,吸引用户...
Animate.css是一个流行的开源库,专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本,这是一个更新到最新状态的库,确保了你能够获得最新的...
在jQuery库中,`animate()`函数是一个非常强大的工具,用于创建自定义的平滑动画效果。这个函数允许开发者控制HTML元素的各种属性,如宽度、高度、位置等,并以指定的速度平滑地改变这些属性。在标题和描述中提到的...
"Animate CC课件汇总整本书电子教案全套课件完整版ppt教学教程.ppt" Animate CC 是基于 Adobe Flash Professional CC 的基础上发展得来的二维动画制作软件。 Animate CC 拥有大量的新特性,特别是在保留原本的 ...
本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...
AnimateCC二维动画设计与制作课程标准 本课程旨在培养数字媒体应用技术专业(影视动画方向)学生的二维动画设计与制作能力,目标是让学生掌握计算机二维动画设计与制作的基本知识与创作技巧,能制作不同类型的简单...
Animate.css 是一个强大的预设CSS3动画库,它为开发者提供了丰富的动画效果,极大地简化了在Web项目中添加动态效果的工作。这个库包含了各种各样的动画类型,如淡入淡出、滑动、旋转、缩放等,适用于按钮、图标、...
Animate CC 2019 动漫制作案例教程全书电子教案完整版课件 Animate CC 2019 是 Adobe 公司推出的动漫制作软件,广泛应用于动画、漫画、游戏、广告、教育等领域。本教程旨在帮助读者快速掌握 Animate CC 2019 的基础...
《jQuery数字跳动插件AnimateNumber深度解析》 在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化...
Animate CC 2017是Adobe公司推出的一款强大的二维动画软件,广泛应用于网页、游戏、教育、影视等领域。本课程的目的是帮助初学者快速掌握Animate CC 2017的基本操作,并逐步提升到进阶水平,创作出富有创意的动画...
在本项目中,我们关注的是一个使用Animate.css动画库实现的全屏滚动解决方案,特别针对Vue.js框架,可用于移动端和PC端的应用开发。Animate.css是一个强大的、预定义的CSS动画库,可以为网页添加各种炫酷的动画效果...
Vue 利用 vue-animate-number 插件动态展示数字 摘要:本文将介绍如何使用 vue-animate-number 插件在 Vue 项目中动态展示数字,从 0 动态滚动到指定数字。 一、安装 vue-animate-number 插件 -------------------...
Animate.css 是一个强大的、易于使用的库,它包含了大量的预定义CSS动画效果,可以轻松地为网页元素添加动态效果。这个库极大地简化了开发者的工作,使他们无需深入学习复杂的CSS3动画语法,就能创建出令人眼前一亮...
Animate.css是一个广受欢迎的开源CSS3动画库,它为网页开发者提供了一系列预先设计好的、易于使用的动画效果。这个库极大地简化了在Web项目中添加动态元素的过程,无需编写复杂的JavaScript或者CSS关键帧动画。让...
### Swiper结合Animate实现整屏滚动效果的知识点详解 #### 一、Swiper与Animate概述 Swiper是一款功能强大且灵活的触摸滑动组件库,适用于网页和移动应用中的多种场景,如幻灯片展示、产品轮播图、广告轮播等。其...
Animate动画设计与制作项目教程是针对想要学习和掌握Adobe Animate这一强大动画制作软件的用户而准备的教学资源包。这个压缩文件包含了丰富的课程材料,旨在帮助初学者和进阶者提升在数字媒体、游戏开发、网页动画...
"wow.js+animate" 是一种结合了Wow.js和Animate.css技术的解决方案,用于在网页上创建引人入胜的动画效果。让我们深入探讨这两个关键组件以及如何将它们整合到你的网页项目中。 **Wow.js** 是一个JavaScript库,由...
在“actionScript关节运动animate”这个主题中,我们将深入探讨如何利用ActionScript来模拟人体关节的运动,这在游戏开发、教育应用或艺术表现等领域具有广泛应用。 在Animate(以前称为Flash Professional)中,...
"wow.min.js" 和 "animate.css" 是两个非常有用的工具,它们共同为网页添加了丰富的CSS3动画效果。接下来,我们将深入探讨这两个组件的工作原理、如何使用以及它们在网页设计中的应用。 首先,"wow.min.js" 是一个...