离子框架中的简单动画

Question

我可以在离子框架视图中创建简单的动画。动画将是非常简单的动画，比如改变颜色，褪色，增加元素的高度和宽度，就像jquery在网页中做的动画一样。

Answer 1

是的。离子中没有任何东西会阻止这一点。你真的尝试过吗？或者你问是否Ionic 运送这样的东西？据我所知，答案是否定的。

Answer 2

离子动画与您在标准html页面上的动画一样，唯一的区别是如何设置它的角度。

它在分配给视图的控制器中，您可以添加您的代码。

.controller('homeCtrl', ['$scope', function($scope) { 
    // Jquery animation 
    $(selector).animate({params},speed,callback); 

    // Greensock animation 
    var photo = document.getElementById("photo"); //or use jQuery's $("#photo") 
    TweenLite.to(photo, 1.5, {width:100}); 

    // or define a function and call it when you want an animation to run 
    $scope.animate = function(element) { 
     $(element).animate({params},speed,callback); 
    } 
}]) 

这就是它的要点，你可以看看更详细的东西上YearOfMoo

Answer 3

是的，你可以对这个看看。

一个功能强大的JavaScript动画引擎，适用于web和混合移动应用程序，受Facebook Pop的启发，由Ionic团队构建。

https://github.com/driftyco/collide

var animation = collide.animation({ 
    // 'linear|ease|ease-in|ease-out|ease-in-out|cubic-bezer(x1,y1,x2,y2)', 
    // or function(t, duration), 
    // or a dynamics configuration (see below) 
    easing: 'ease-in-out', 
    duration: 1000, 
    percent: 0, 
    reverse: false 
}); 

// Actions, all of these return `this` and are chainable 
// .on('step' callback is given a 'percent', 0-1, as argument (for springs it could be outside 0-1 range) 
// .on('stop' callback is given a boolean, wasCompleted 
animation.on(/step|destroy|start|stop|complete/, function() {}) 
animation.once(...) //same event types 
animation.off(...) //works like jquery.off 
animation.stop(); //stop/pause at current position 
animation.start(shouldSetImmediately); //start from current position 
animation.restart(); 
animation.velocity(n) //starts the animation going at the given velocity ,relative to the distance, decaying 
animation.distance(n); //distance for the velocity to be relative to 
animation.destroy(); //unbind all events & deallocate 

animation.isRunning(); //boolean getter 

//These are getters and setters. 
//No arguments is a getter, argument is a chainable setter. 
animation.percent(newPercent, shouldSetImmediately); //0-1 
animation.duration(duration); //milliseconds 
animation.reverse(isReverse); 

animation.easing(easing); //setter, string|function(t,duration)|dynamicsConfiguration. 
// Dynamics configuration looks like this one of these: 
// animation.easing({ 
// type: 'spring', 
// frequency: 15, 
// friction: 200, 
// initialForce: false 
// }); 
// animation.easing({ 
// type: 'gravity', 
// bounce: 40, 
// gravity: 1000, 
// });