Javascript使动画变慢

Javascript making animation slower?

本文关键字：动画 Javascript      更新时间：2023-09-26

我使用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);
}

由于某些原因，velocity示例的脉冲标题有起伏的帧。

这里有一个CSS3的代码:http://codepen.io/Snowfiring/pen/Beiba

这里有一个依赖于速度的代码:http://codepen.io/Snowfiring/pen/jbuvy

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

如果你想在桌面浏览器的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');
}

你就可以走了

相关文章：