Question

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

Answer 1

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

一款功能强大的javascript动画引擎，适用于网络和混合移动应用，灵感来自Facebook Pop，由 Ionic团队构建。

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,
// });

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

是。离子中没有任何东西可以阻止这种情况。你真的尝试过吗？或者你是否在询问Ionic 是否这样的东西？据我所知，答案是否定的。

Ionic Framework中的简单动画

3 个答案: