Hexo NexT主题修改动画效果速度

最新推荐文章于 2024-08-20 08:54:38 发布

Soul_wwb

最新推荐文章于 2024-08-20 08:54:38 发布

阅读量2.6k

点赞数 2

分类专栏： hexo 文章标签： hexo next blog theme

本文链接：https://blog.csdn.net/Domino_b/article/details/81704118

版权

Hexo NexT主题修改动画效果速度

每次打开博客、切换页面的时候都会有一段动画效果，感觉播放的速度有些慢，想调快些，但是网上搜了半天都没看到有教程，只有关闭动效这个方案，只好自己去翻源码了。

修改动画效果速度后的效果：https://wwb.colonp.top

themes/next/source/js/src/motion.js就是动画效果相关的js。

在文件中搜索duration字段，就是动画效果的持续时间，数值越大动画速度越慢。

通过几次修改尝试发现，81行的var SIDEBAR_DISPLAY_DURATION = 200;还是默认的数值比较好，这个是侧边栏展现的动画效果。如果调小了数值，侧边栏会出现的比较突兀，而收回侧边栏的时候又比较慢，不是很和谐。

以下是我简单修改后的motion.js以供参考：

/* global NexT: true */

$(document).ready(function () {
   
  NexT.motion = {};

  var sidebarToggleLines = {
    lines: [],
    push: function (line) {
   
      this.lines.push(line);
    },
    init: function () {
   
      this.lines.forEach(function (line) {
   
        line.init();
      });
    },
    arrow: function () {
   
      this.lines.forEach(function (line) {
   
        line.arrow();
      });
    },
    close: function () {
   
      this.lines.forEach(function (line) {
   
        line.close();
      });
    }
  };

  function SidebarToggleLine(settings) {
   
    this.el = $(settings.el);
    this.status = $.extend({}, {
      init: {
        width: '100%',
        opacity: 1,
        left: 0,
        rotateZ: 0,
        top: 0
      }
    }, settings.status);
  }

  SidebarToggleLine.prototype.init = function () {
   
    this.transform('init');
  };
  SidebarToggleLine.prototype.arrow = function () {
   
    this.transform('arrow');
  };
  SidebarToggleLine.prototype.close = function () {
   
    this.transform('close');
  };
  SidebarToggleLine.prototype.transform = function (status) {
   
    this.el.velocity('stop').velocity(this.status[status]);
  };

  var sidebarToggleLine1st = new SidebarToggleLine({
    el: '.sidebar-toggle-line-first',
    status: {
      arrow: {