Javascript使动画变慢？答案

【问题标题】：Javascript making animation slower?Javascript使动画变慢？
【发布时间】：2014-06-01 07:10:15
【问题描述】：

我使用velocity.js 试图了解CSS3 动画和Javascript 动画之间的区别。

对于 CSS3，我的动画位于 h1 和 h2 元素上

/* HeaderIntro */
@keyframes headerintro {
  0% {
    opacity: 0;
    margin-right: 15rem;
  } 

  100% {
    opacity: 1;
    margin-right: 0;
  }
}

/* SubHeaderIntro */
@keyframes subheaderintro {
  0% {
    opacity: 0;
    margin-left: 15rem;
  } 

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

/* TitlePulse */
@keyframes titlepulse {
  50% {
    transform: scale(.98);
  }
}

我的velocity.js版本是

$(document).ready(function() {

  headerIntro();
  headerPulse();
});


$mainHeader = $('.mainheader');

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
             .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
            .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '95%'}, 850, 'ease-in-out')
             .velocity({scale: '100%'}, 850, 'ease-in-out', headerPulse);
}

由于某种原因，速度示例的脉冲标题帧不连贯。

这是 CSS3 的代码笔：http://codepen.io/Snowfiring/pen/Beiba

这是 Velocity 的代码笔：http://codepen.io/Snowfiring/pen/jbuvy

【问题讨论】：

这似乎是浏览器将动画理解为平滑过渡，而不是 Velocity 版本，所有浏览器都知道的是一系列瞬间......
@NiettheDarkAbsol 您的陈述不正确。他们对待他们就像“去这个价值”。问题是如何处理渲染

标签： javascript html css animation velocity.js

【解决方案1】：

基于 JavaScript 的 CSS 转换的一个优点是硬件加速 (HA) 不会自动触发桌面浏览器上的 2D 转换 - 这意味着默认情况下文本不会变得模糊。

如果您确实想在桌面浏览器上对 2D 变换（translateX/Y、rotateZ）启用 HA，并从它提供的亚像素采样中受益，请在动画期间将 translateZ 属性设置为 0。

（有关此主题的更多信息，请参阅 Velocity 的文档：http://velocityjs.org/#transforms。）

只需将函数更改为以下内容：

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
         .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
        .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '98%', translateZ: 0 }, 850, 'ease-in-out')
             $mainHeader.velocity({scale: '100%', translateZ: 0 }, 850, 
                                   'ease-in-out');
}

你会很高兴的。

【讨论】：