javascript -- (tween.js简单动画制作)

声明:tween.js -- github.com -- search --下载

/***导入tween.js**/

<script type="text/javascript" src="js/tween.js" ></script>

/***style样式**/

<style>

  #wrap {

    position: relative;/***相对定位**/

  }

  #box {

    position: absolute;/***绝对定位**/

    width: 100px;

    height: 100px;

    background: blue;

  }

</style>

/***style样式结束**/

/***body**/

<div id="wrap">

  <div id="box">

  </div>

</div>

/***body部分结束**/

/***<script>**/

<script type = "text/javascript">

  var box = document.getElementById(‘box‘);

  /***定义变量,存储box的位置**/

  var position;

  position = {x:100,y:0};

  init();

  /***init()函数**/

  function init() {

    var tween = new TWEEN.Tween(position);

      .to({x:500},1000);

      .onUpdate(update);

      .start();

  }

  /***animate()函数  执行动画,相当于setInterval**/

  function animate(time){

    requestAnimationFrame(animate);

    tween.update(time);

  }

  /***update()函数**/

  function update() {

    box.style.left = position.x + ‘px‘

  }

  

</script>

/***</script>结束**/

时间: 2024-07-30 22:03:47

javascript -- (tween.js简单动画制作)的相关文章

tween.js的动画效果

实现动画可以用好多种的方法,今天来看看用tween.js插件是如何实现动画效果的.  tween.js的使用 1.下载 2.引入 3.使用tween.js语法 需要哪些条件来做运动 1.初始位置 2.目标点 缓动函数 1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine  正弦缓动效果 7.Expo  指数缓动效果 8.Circ  圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函

JavaScript之JS实现动画效果

在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能为力的.如果我们想随着时间的变化而不断改变某个元素的样式,则只能用JavaScript.JavaScript能够按照预定的时间间隔重复的调用一个函数,而意味着我们可以随着时间的推移而不断改变某个元素的样式. 动画是样式随着时间变化的完美例子之一.简单的说,动画就是让元素的位置随着时间而不断的发生变化

前端之JavaScript:JS简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

原生javascript实现的一个简单动画

本文章向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>javascript实现的简单动画</title> <style type="text/css"&g

js利用节点,封装函数进行简单弹幕制作

js简单弹幕制作(注:简单弹幕从右向左执行,除了数字字母之外,汉字执行会出现出框是排列向下成一排清空状态(如下图),不必担心,简单弹幕的问题 后续有说明和解决方案). 思路: 1.在输入框内输入值显示在显示区域里 2.发送完毕,输入框内清空 3.弹幕从右向左,且多行(可控) 4.性能优化处理(显示完毕清空弹幕,计时器) 效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8">

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Learning Three.js - Tween.js for Smooth Animation tween.js 用户指南tween.js u

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求.这个方法接受一个函数为参,该函数会在重绘前调用. 注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame(). 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般

Javascript学习------top/left简单动画,效果与jquery的动画差不多

在网上查看jquery的动画帧率为13毫秒 我用下面的小例子验证了一下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>top/left简单动画</title> 5 <style type="text/css"> 6 * { margin: 0px; padding: 0px; } 7 </style> 8 <script src="http:

Android中的补间动画(tween)的简单使用

相对帧动画,补间动画(tween)可以这么理解:我们不必像帧动画一样指定动画的每一帧,只需定义一个动画的开始和结束关键帧,而中间变化的帧由系统帮我们计算. tween动画可以分为下面几种: AlphaAnimation(透明渐变动画): 示例:res/anim/alpha.xml <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.andr