推荐：TweenMax.js适用于移动端和现代互联网的超高性能专业级动画插件
https://www.tweenmax.com.cn/ 来源： oschina 链接： https://my.oschina.net/mj20200214/blog/3274438
tweenmax
TweenMax—ScrambleText插件 实现类似电脑破译密码的特效
首先贴一下TweenMax的中文网： https://www.tweenmax.com.cn/ 首先先展示一下最后的效果，需要的就继续看下去： 那团乱码是会一直变的 那么如何实现上图的效果呢？？？ 其实就是运用了TweenMax的插件 ScrambleTextPlugin（在这个页面可以下载： https://www.tweenmax.com.cn/source/ ） 代码如下： JS $(document).ready(function(){ var tl = new TimelineLite(); tl.to("#scramble1",3,{delay:2})//这边的delay就是用来做延迟显示的，也可以去掉的。用scrambleText这个插件的意义其实就是：当第一个动画结束之后，第二个动画才会开始，所以应该是去避免使用delay属性的 .to("#scramble1",8,{scrambleText:{text:"{original}", chars:"upperAndLowerCase", revealDelay:0.5, tweenLength:true, newClass:"class2", oldClass:"class1",speed:10,delimiter:""}, ease:Linear.easeNone}) .to("#scramble2",3,
Canvas Image Animation (Crossfade)
问题 Using HTML5 canvas I'm trying to load images and create a 'crossfade' effect where the first image fades into view then, after a short delay, the second image fades in over top of first image, etc. With the help of answers to similar questions on this forum I've got 2 separate bits of code working ... one which loads an array of images and a second which animates a 'fade in' effect. My problem is that I don't know how to combine these 2 scripts to load an array of images AND ALSO have each
GASP动画的基本使用
GSAP(TimelineMax、TweenMax) 什么是GSAP？ GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库。 GSAP优点 1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。 2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。 3、没有依赖。 4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。 GSAP提供4个库文件供用户使用 1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。 2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。 3. TimelineMax
Hangout, Evernote menu effects in dataTables
问题 So I have set of data in jquery DataTables plugin and what I am trying to achieve is a List of actions popup under one action control. For clear example I would like to give example of Hangouts and Evernote application which has that particular functionality and below image shows it: So left side of the image you can see hangout's + control which when clicked expands to a view which will be like right side of image i.e. with all other different actions and some fade In from bottom right Below
Stop iteration when end of data objects are reached
问题 Using the TweenMax library, I am unable to kill or stop a delayedCall when the end of the data object is reached instead of looping because it is a self calling function. https://jsfiddle.net/rdzo13cf/6/ In the example above the last item in the data is not displayed. 回答1: Actually it's because you are incrementing your iter variable before you set it. Which causes it to not display the last item, you want to increment after: function setContent() { element.html(data[iter].content); iter =
Fading in different items and different times using Greensock Tween
问题 I am really new with GSAP and I think it is amazing. However I cannot work out how to fade in these items separately. 1st one (this is fine) for the 2nd wish to fade in at a certain time and 3rd at a certain time. JavaScript: function startFinalAnimation(){ var fa = new TimelineLite(); fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"}); fa.to(finalContent, 4, {delay: 0, opacity: 1}); fa.to(logo, 5, {delay: 0, opacity: 1}); } 回答1: TimelineLite 's .to()
How to trigger a GSAP function when a slide comes active with Reveal.js?
问题 I want to add some simple animation to a presentation. I use GSAP (TweenMax) for this work. I have no problem with the animation setup, but these animations triggers as soon the presentation starts. How can I control this, so that only when the slide with animations is active the scripts execute? All your help is welcome. Regards! EDIT: Well, looks like reading the docs of the libraries answers at least 90% of this kind of questions. For the lazies (like me :) ) here´s what I found: To check
Add and remove class different elements
问题 So im currently learning jquery and a little bit of tweenlite for animations (I wanna keep it basic). So im currently building a portfolio grid but I wanna add on a click of an element that the other element is fading in (sliding from right it doesn't matter). But I can't find a way to make it work that 1 element have 1 box to show and the other element have a different box to show without coping the code over and over and change a simple number everytime, there must be a way to make it work
Rotate the volume knob in html5 with createJS
问题 I want to create volume knob using HTML5 and CreateJS. It is almost done. you can see this on following url http://www.urbantruanthosting.co.uk/radiosimulator/testpage.html but it is moving on every event of js. And I want to rotate on mouse's pressmove event on both side and currently it's moving clockwise, how can I rotate it in reverse. Please give me suggestion. Thanks in advance. and I have used following code. var bmp = new createjs.Bitmap(image).set({ scaleX: 1, scaleY: 1, regX: w / 2,