策略模式-3.策略模式的动画

<!DOCTYPE html><html><head><title>策略模式demo</title></head><body><div style="position: absolute;background:blue;left: 0" id="div">我是div</div>        </body><script type="text/javascript">//运动算法var tween = {linear: function( t, b, c, d ){return c*t/d + b;
                },easeIn: function( t, b, c, d ){return c * ( t /= d ) * t + b;
                },strongEaseIn: function(t, b, c, d){return c * ( t /= d ) * t * t * t * t + b;
                },strongEaseOut: function(t, b, c, d){return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + b;},sineaseIn: function( t, b, c, d ){return c * ( t /= d) * t * t + b;
                },sineaseOut: function(t,b,c,d){return c * ( ( t = t / d - 1) * t * t + 1 ) + b;}};var Animate = function (dom) {this.dom          = dom;//进行运行的dom节点this.startTime    = 0;//动画开始时间this.startPos     = 0;//dom的初始位置this.endPos       = 0;//dom的目标位置this.propertyName = null;//dom节点需要被改变的css属性名this.easing       = null;//缓动算法this.duration     = null;//动画持续时间
        }Animate.prototype.start = function (propertyName, endPos, duration, easing) {this.startTime    = +new Date;//动画启动时间this.startPos     = this.dom.getBoundingClientRect()[propertyName];//初始位置this.propertyName = propertyName;this.endPos       = endPos;this.duration     = duration;this.easing       = tween[ easing ]; // 缓动算法var _self  = this;var timeId = setInterval(function () {//启动定时器；开始动画if (_self.step() === false) {//如果动画结束；停止计时器
                    clearInterval(timeId);}},19)};Animate.prototype.step = function () {var t = +new Date;if (t>=this.startTime+this.duration) {this.update(this.endPos);return false;}//当前位置var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);this.update(pos);console.log(pos);}Animate.prototype.update = function (pos) {this.dom.style[this.propertyName] = pos+'px';}//==========测试===========var div     = document.getElementById('div');var animate = new Animate(div);animate.start( 'left', 1000, 2000, 'sineaseOut' );</script></html>

转载于:https://www.cnblogs.com/hanhui66/p/7110796.html

策略模式-3.策略模式的动画相关推荐

开发者模式之—-策略者模式
开发者模式之--策略者模式 -序言:本文为<Androdi源码及开发模式>的学习笔记.更详细内容请购买查看该正版书籍. 在开发中,当一个任务有多个解决方案时,最简单的方式就是使用 if-e ...
计算机辅助教育的教学模式,计算机辅助教育教学模式教学策略
计算机辅助教学作业 1. 说明探究性教学模式与问题型教学模式的异同. 答:相同之处:探究性教学模式学习者的学习过程是自我识别.自我选择.自我培养.自我控制的活动过程.问题型教学模式旨在使学习者投入问题 ...
C++模式学习------策略模式
当遇到同一个对象有不同的行为,方法,为管理这些方法可使用策略模式. 策略模式就是对算法进行包装,是把使用算法的责任和算法本身分割开来.通常把一个系列的算法包装到一系列的策略类里面,这些类继承一个抽象的 ...
【设计模式】模式PK：策略模式VS状态模式
1.概述行为类设计模式中,状态模式和策略模式是亲兄弟,两者非常相似,我们先看看两者的通用类图,把两者放在一起比较一下. 策略模式(左)和状态模式(右)的通用类图. 两个类图非常相似,都是通过Cont ...
Java设计模式之策略模式与状态模式
一.策略模式定义定义:策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们之间可以相互替换,策略模式可以在不影响客户端的情况下发生变化. 好了,定义看看就完了,我知道你很烦看定义. 二.策 ...
工厂模式、策略者模式、责任链模式综合应用
设计模式的具体运用: 简单工厂模式.策略者模式.责任链模式定义与使用 classLoader的具体运用自定义的classloader 来动态加载类程序功能设计: 在商城购物时,商城可能会在特殊的日 ...
Java设计模式(备忘录模式-解释器模式-状态模式-策略模式-职责链模式)
Java设计模式Ⅶ 1.备忘录模式 1.1 备忘录模式概述 1.2 代码理解 2.解释器模式 2.1 解释器模式概述 3.状态模式 3.1 状态模式概述 3.2 代码理解 4.策略模式 4.1 策略模 ...
java - 策略模式、状态模式、卫语句，避免多重if-else(转)
前言当代码中出现多重if-else语句或者switch语句时.弊端之一:如果这样的代码出现在多处,那么一旦出现需求变更,就需要把所有地方的if-else或者switch代码进行更改,要是遗漏了某一处 ...
设计模式-策略模式,观察者模式,装饰者模式,静态工厂模式,工厂方法模式
设计模式这个东西,永远不是单单从书本上就能获取到的东西.曾经看到一个比喻,比喻的就很巧妙,文艺复兴时期的教学方式,那时候诞生了很多巨匠,达芬奇,莫开朗基罗,拉斐尔都是在这个时期绽放光芒的巨星.有一种说 ...
Java设计模式之十一 ---- 策略模式和模板方法模式
前言在上一篇中我们学习了行为型模式的访问者模式(Visitor Pattern)和中介者模式(Mediator Pattern).本篇则来学习下行为型模式的两个模式,策略模式(Strategy Pa ...

策略模式-3.策略模式的动画

策略模式-3.策略模式的动画相关推荐

最新文章

热门文章