`
全冠清
  • 浏览: 52715 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Animate

 
阅读更多
#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动画特效

    Animate.min.css是一个非常实用的CSS库,专门用于创建各种丰富的动画效果。这个库是由开发者Daniel Eden精心设计和编写的,它极大地简化了在Web开发中添加动态视觉效果的过程。通过在HTML元素上简单地应用预定义的...

    animate(CSS动画库)

    Animate.css 是一个强大的开源CSS动画库,它提供了一系列预先定义好的动画效果,使得开发者无需从零开始编写复杂的CSS代码,就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计,提升用户体验,吸引用户...

    animate.css-4.1.1.zip

    Animate.css是一个流行的开源库,专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本,这是一个更新到最新状态的库,确保了你能够获得最新的...

    animate动画特效重复调用

    在jQuery库中,`animate()`函数是一个非常强大的工具,用于创建自定义的平滑动画效果。这个函数允许开发者控制HTML元素的各种属性,如宽度、高度、位置等,并以指定的速度平滑地改变这些属性。在标题和描述中提到的...

    Animate-CC课件汇总整本书电子教案全套课件完整版ppt教学教程.ppt

    "Animate CC课件汇总整本书电子教案全套课件完整版ppt教学教程.ppt" Animate CC 是基于 Adobe Flash Professional CC 的基础上发展得来的二维动画制作软件。 Animate CC 拥有大量的新特性,特别是在保留原本的 ...

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    AnimateCC二维动画设计与制作-课程标准.pdf

    AnimateCC二维动画设计与制作课程标准 本课程旨在培养数字媒体应用技术专业(影视动画方向)学生的二维动画设计与制作能力,目标是让学生掌握计算机二维动画设计与制作的基本知识与创作技巧,能制作不同类型的简单...

    Animate.css 一款强大的预设css3动画库

    Animate.css 是一个强大的预设CSS3动画库,它为开发者提供了丰富的动画效果,极大地简化了在Web项目中添加动态效果的工作。这个库包含了各种各样的动画类型,如淡入淡出、滑动、旋转、缩放等,适用于按钮、图标、...

    Animate-CC-2019-动漫制作案例教程全书电子教案完整版课件.ppt

    Animate CC 2019 动漫制作案例教程全书电子教案完整版课件 Animate CC 2019 是 Adobe 公司推出的动漫制作软件,广泛应用于动画、漫画、游戏、广告、教育等领域。本教程旨在帮助读者快速掌握 Animate CC 2019 的基础...

    jquery数字跳动插件Animate Number.zip

    《jQuery数字跳动插件AnimateNumber深度解析》 在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化...

    《Animate CC 2017动画制作入门与进阶》课件.zip

    Animate CC 2017是Adobe公司推出的一款强大的二维动画软件,广泛应用于网页、游戏、教育、影视等领域。本课程的目的是帮助初学者快速掌握Animate CC 2017的基本操作,并逐步提升到进阶水平,创作出富有创意的动画...

    基于animate.css动画库的全屏滚动,适用于vue.js(移动端、pc)项目。.zip

    在本项目中,我们关注的是一个使用Animate.css动画库实现的全屏滚动解决方案,特别针对Vue.js框架,可用于移动端和PC端的应用开发。Animate.css是一个强大的、预定义的CSS动画库,可以为网页添加各种炫酷的动画效果...

    vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字).docx

    Vue 利用 vue-animate-number 插件动态展示数字 摘要:本文将介绍如何使用 vue-animate-number 插件在 Vue 项目中动态展示数字,从 0 动态滚动到指定数字。 一、安装 vue-animate-number 插件 -------------------...

    基于animate.css弹出框弹出关闭特效 (5星级)

    Animate.css 是一个强大的、易于使用的库,它包含了大量的预定义CSS动画效果,可以轻松地为网页元素添加动态效果。这个库极大地简化了开发者的工作,使他们无需深入学习复杂的CSS3动画语法,就能创建出令人眼前一亮...

    Animate动画库及演示

    Animate.css是一个广受欢迎的开源CSS3动画库,它为网页开发者提供了一系列预先设计好的、易于使用的动画效果。这个库极大地简化了在Web项目中添加动态元素的过程,无需编写复杂的JavaScript或者CSS关键帧动画。让...

    swiper+animate.docx

    ### Swiper结合Animate实现整屏滚动效果的知识点详解 #### 一、Swiper与Animate概述 Swiper是一款功能强大且灵活的触摸滑动组件库,适用于网页和移动应用中的多种场景,如幻灯片展示、产品轮播图、广告轮播等。其...

    课件资源等--Animate动画设计与制作项目教程.zip

    Animate动画设计与制作项目教程是针对想要学习和掌握Adobe Animate这一强大动画制作软件的用户而准备的教学资源包。这个压缩文件包含了丰富的课程材料,旨在帮助初学者和进阶者提升在数字媒体、游戏开发、网页动画...

    wow.js+animate

    "wow.js+animate" 是一种结合了Wow.js和Animate.css技术的解决方案,用于在网页上创建引人入胜的动画效果。让我们深入探讨这两个关键组件以及如何将它们整合到你的网页项目中。 **Wow.js** 是一个JavaScript库,由...

    actionScript关节运动animate

    在“actionScript关节运动animate”这个主题中,我们将深入探讨如何利用ActionScript来模拟人体关节的运动,这在游戏开发、教育应用或艺术表现等领域具有广泛应用。 在Animate(以前称为Flash Professional)中,...

    wow.min.js和animate.css

    "wow.min.js" 和 "animate.css" 是两个非常有用的工具,它们共同为网页添加了丰富的CSS3动画效果。接下来,我们将深入探讨这两个组件的工作原理、如何使用以及它们在网页设计中的应用。 首先,"wow.min.js" 是一个...

Global site tag (gtag.js) - Google Analytics