标签: tweenmax

我在我的网站上使用greensock gsap进行动画制作.问题是在动画结束之前执行的回调.在下面的示例中,元素被移动到动画的一半上的某处.

TweenLite.to($(".flipper"), 2, {rotationY:180,onComplete:function(){
    $(this).remove()
}});

有没有人遇到过同样的问题？

我试图了解使用TweenLite/TweenMax的最佳方法是什么.

• 使用相同的变量引用所有补间是否有用？
• 在使用相对公共方法杀死补间之后,我是否必须将引用设置为null以改进垃圾收集处理？

下面是一个评论很好的例子:

$(document).ready(function () {
    var elementOne = $('#elementOne');
    var elementTwo = $('#elementTwo');
    var myTween;

    // is it useful to overwrite the variable?
    myTween = TweenMax.to(elementOne, 1, {
        opacity: 0
    });
    myTween = TweenMax.to(elementTwo, 1, {
        left: 0,
        onComplete: destroy
    });

    function destroy () {
        // suggested on tweenmax docs
        // the console.log still returns me the object
        myTween.kill();
        console.log(myTween);

        // is it required for garbage collecting?
        // now the console.log returns me null
        myTween = …

我试图让这个页面上的图像同时旋转,缩放和改变不透明度,就像这个网站上的一些图像一样;

http://soyouwanttogotorisd.com/

这是我的网站;

http://www.ducklingfarm.com

我正在使用TweenMax,这是我的代码;

$(document).ready(function() {
    TweenMax.from( $('#homeImg'), .5, 
    {css:{scale:.05, opacity:0, rotation: 180}, ease:Quad.easeInOut}), 400,-400);
 });

但什么都没发生......

请帮我!

谢谢!

我正在尝试使用ScrollMagic构建站点，但我遇到一个问题：我将reverse选项定义为false，并且在特定场景下似乎无法覆盖此选项。

我有几个场景，只需要一个或两个场景即可制作反向动画。全局设置反向选项false并为特定场景设置反向动画会容易得多。

这是我的代码：

var controller;
$(document).ready(function($) {
    controller = new ScrollMagic({
        globalSceneOptions: {
            reverse: false
        }
    });
});

。。。

$(document).ready(function($) {
    var tween = TweenMax.from("#works_macbook_top", 1, 
        { rotationX: -80, ease: Sine.easeOut }
    );
    var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100, reverse: true})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});

动画不会向后播放，因此相反：场景中设置的true属性似乎不会取代全局设置。

有可能做到这一点吗？希望你能帮我！谢谢！

我收到错误,我没有找到任何线索,我正在使用videojs来控制滑块中的多个视频,在每个完成的转换中,我调用一个新的videojs实例并将ID存储到变量并dispose()旧的视频.因为我有很多幻灯片(或视频),并且想要在没有活跃的性能时杀死它们.我的滑块在TweenMax下工作..我从Timline调用onStart事件中的dispose().当调用dispose()时,我收到此错误:

未捕获的TypeError:无法读取null的属性"vdata1408997779453"

这是我的代码示例:

var $slides = [],
    videos =[],
    currentSlide = 0,
    currentVideo = null;

$(function(){

    TweenLite.to($('#header-wrap'), 1, {
            left: x,
            onStart: function(){
                if(currentVideo) {
                    TweenMax.set($('.video-holder'), {autoAlpha: 0});
                    currentVideo.dispose();
                }
            },

            onComplete: function() {
                if(videos[slideActive].url) {
                        videojs('movie-video-holder-'+slideActive+'', {"autoplay": false, "preload": "auto", "controls": false, "lopp": false}, function(){
                            currentVideo = $vid;
                            [...]
                        });
                }
            }
    [...]

谢谢!

有没有办法使用凉亭安装tweenmax？

我一直在研究角动画,我注意到egghead教程使用tweenmax,但它直接将它导入到html中.我想使用bower进行导入,以便我可以使用所有托管的导入包利用gulp构建过程来创建缩小的供应商脚本.

我有这个代码,为不透明度1到0的对象设置动画.

但我想知道如何让这个动作无限重复,每1秒钟？

有任何想法吗 ？

var tl = new TimelineMax();

        tl.add(timeLine_parpados.to($parpados,0.1,{opacity:1})); // parpados aparecen
        tl.add(timeLine_parpados.to($parpados,0.1,{opacity:0})); // parpados desaparecen

        tl.play();

我正在尝试部署我的Angular App但在运行后ng build --prod --base-href .我在Chrome中遇到以下错误

main.afc84290417a517dd6c3.js:1 Uncaught TypeError: Cannot set property _autoActivated' of undefined
    at Object.zUnb (main.afc84290417a517dd6c3.js:1)
    at p (runtime.a66f828dca56eeb90e02.js:1)
    at Object.5 (main.afc84290417a517dd6c3.js:1)
    at p (runtime.a66f828dca56eeb90e02.js:1)
    at n (runtime.a66f828dca56eeb90e02.js:1)
    at Array.e [as push] (runtime.a66f828dca56eeb90e02.js:1)
    at main.afc84290417a517dd6c3.js:1

ng -v输出

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

我真的不确定怎么去调试这个？运行ng serve应用程序运行正常.

搜索项目唯一的引用_autoActivated是在TweenMax.js中

export const TweenMax = TweenMaxBase;
TweenMax._autoActivated = [TimelineLite, …

使用SVG的新手.我有一个工作演示,在x轴上从左到右有一个线性渐变渐变,但是我试图在y轴上从底部到顶部产生相同的影响.试过几种不同的方法,但不能让它工作相同.

https://codepen.io/joshuaeelee/pen/bqYmEG

HTML

<div class="share">
<ul>
    <li>
        <svg class="svg" style="width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;">
         <defs>  
           <linearGradient id="gradient-0">  
             <stop offset="0.8" stop-color="#fff"/>
             <stop offset="1" stop-color="#000"/>  
           </linearGradient>
           <mask id="gradient-mask-0" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">  
             <rect class="js-rect" x="-2" y="0" width="2" height="1" fill="url(#gradient-0)"  />  
           </mask>  
          </defs>
          <image class="js-images" x="0" y="0" width="100%" height="100%" xlink:href="http://68.media.tumblr.com/ef71091b57992c63cd6b6371160694b7/tumblr_o9c283SMGZ1st5lhmo1_1280.jpg" / mask="url(#gradient-mask-0)" preserveAspectRatio="xMidYMid slice">
        </svg>
    </li>
</ul>

JS - 使用TweenMax更改Rect上的属性

const tl = new TimelineMax()

let firstRect = document.querySelector('.js-rect')

tl.to(firstRect, 5, {
    attr:  {
        x: 0
    }
})

我创建了使用循环吐温使用GreenSock的JavaScript和我使用的功能也得到了循环,也许这不是循环的最佳方式,如果你知道一个更好的方法请咨询,但基本上当我尝试用这种方法杀吐温,它不起作用.

我的代码:

var dvdTween;
function playDVD()
{
 dvdTween = TweenMax.to($("#bigDVD"), 4, {css:{rotation:+1440, transformOrigin:"150px 150px"},ease:Expo.easeNone, delay:7, onComplete:playDVD});
}

///稍后在我调用的函数中

dvdTween.kill(); /// but this does nothing. 

再次,有可能是循环更好的方式补间,这可能是我的问题,但截至目前该补间不断打电话后,我"杀"它的功能.

感谢您的提示和帮助.