5

我一直在为 iPad 应用程序创建许多小型胖客户端 JavaScript 应用程序，它在 UIWebview 中加载相关应用程序。我现在让它们跨浏览器，并且需要使用 JavaScript 为 CSS 动画和过渡合并一些后备。

我的 webkit 特定实现对所有动画/过渡使用 CSS 类，其开始和结束状态在设计时是已知的，使用 javascript 中的添加/删除类并利用相关的 webkitTransitionEnd/webkitAnimationEnd 事件。

对于“动态”过渡，我有一个简单的“动画”功能，它只是将样式属性应用于相关元素。

我想通过简单的添加/删除类等保持用于应用转换的内部 API 与当前实现尽可能相似。我通常有一个应用程序的 CSS 和 js 文件（均已缩小）。

所以有几个问题/点，我会很感激任何输入：

  1. IE7/8 问题 - IE9.js

  2. 动态添加供应商特定的前缀 - 到目前为止发现'jquery.css3finalize'。

  3. 过渡到一个类：'jquery.animateToClass' - 似乎每次应用一个类时都会搜索样式表 - 是否应该在进一步查找时缓存相关类？这是否缓慢/资源匮乏？

  4. 对于“@keyframe”动画：我想要每个 CSS3 动画的关键帧的 javascript 对象“表示”。因此，将一个类传递给“doAnimationWithClass”函数将使用正常的 css3 动画（如果在浏览器中可用），但如果没有，它会将“对象版本”传递给一个函数，该函数将使用 css3 转换（如果可用）链接每个关键帧转换或jQuery.animate（或等效），最终达到相同的结果。

例如：

CSS：

@-webkit-keyframes an-animation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.an-animation {
  -webkit-animation-name: an-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
}

JS：

var animations = {
    an-animation: {
      keyframes: [
      { 
        duration: '',
        timing: 'linear',
        props: {
          opacity: 0
        }
      },
      { 
        duration: '0.5s',
        timing: 'linear',
        props: {
          opacity: 1
        }
      },
      { 
        duration: '0.5s',
        timing: 'linear',
        props: {
          opacity: 0
        }
      }
    ]
  }
};

var animationClasses = [
  an-animation: {
    name: 'an-animation';
    duration: '1s';
    timing: 'linear';
    count: 2;
  }
];

function doAnimationWithClass(className) {
  if (modernizer.cssanimations) {
    //normal implementation
  }
  else {
    //lookup class in animationclasses
    //lookup relevant animation object in animationHash
    //pass to animation chaining function
  }
}

AnimationHash 等的创建可以在客户端完成，或者只是在设计时创建（使用批处理/构建文件）。

任何对已经以更明智的方式执行此操作的库的想法或指针都将不胜感激。

4

3 回答 3

2

是的，这是正确的。您需要将关键帧设置传输到 js 对象。我认为 css 动画和关键帧是编写动画的更好方法。JS动画方式很难维护。这是我的解决方法。而且我还写了一个小工具，用于将css关键帧翻译成js对象（css keyframes to js object）。

var myFrame = {
  '0%': {
    left: 0,
    top: 0
  },
  '25%': {
    left: 100,
    top: 100
  },
  '50%': {
    left: 0,
    top: 300
  },
  '100%': {
    left: 0,
    top: 0
  }
};

var keyframes = {
  set: function($el, frames, duration) {
    var animate;
    animate = function() {
      var spendTime;
      spendTime = 0;
      $.each(frames, function(idx, val) {
        var stepDuration, stepPercentage;
        stepPercentage = idx.replace('%', '') / 100;
        stepDuration = duration * stepPercentage - spendTime;
        $el.animate(val, stepDuration);
        return spendTime += stepDuration;
      });
      return setTimeout(animate, duration);
    };
    return animate();
  }
};

keyframes.set($('#mydiv'), myFrame, 2000);
于 2012-08-18T10:31:11.250 回答
1

这里有一些重要的指针http://addyosmani.com/blog/css3transitions-jquery/

于 2011-06-12T18:52:27.237 回答
1

Blackbingo，你的回答完美地为我服务。我添加了缓动选项，以在视差星空中为 ie8 实现 jquery 回退（请参阅CSS parallax background of stars），如下所示：

var animations = {
    'STAR-MOVE': {
        '0%': {
            'background-position-x': '5%',
            'background-position-y': '5%'
        },
        '100%': {
            'background-position-x': '1300%',
            'background-position-y': '600%'
        }
    }
};

var keyframes = {
  set: function($el, frames, duration, easing) {
    var animate;
    animate = function() {
      var spendTime;
      spendTime = 0;
      $.each(frames, function(idx, val) {
        var stepDuration, stepPercentage;
        stepPercentage = idx.replace('%', '') / 100;
        stepDuration = duration * stepPercentage - spendTime;
        $el.animate(val, stepDuration, easing);
        return spendTime += stepDuration;
      });
      return setTimeout(animate, duration);
    };
    return animate();
  }
};

keyframes.set($('.midground'), animations['STAR-MOVE'], 150000,'linear');
keyframes.set($('.foreground'), animations['STAR-MOVE'], 100000,'linear');
于 2013-07-09T13:26:31.660 回答