用code打造自己的过渡动画

tinysun1234 发布于2019-08-30 15:52 / 1290人阅读

摘要：起源自己的过渡动画，为什么要这个东西呢不是说好的么。所以本喵决定打造自己的过渡动画。给出的示例属性指定了模式到路径开始的距离通过修改这两个属性，动画的边界就相应的动起来了。

起源

自己的过渡动画，为什么要这个东西呢？不是说好的Simple is beautiful么。的确我也是非常欣赏简洁的东西，但是对于挂载在Github上的本博客，在国内访问总是不那么流畅，而Next主题的文字下落动画恰恰使博客访问体验变的非常糟糕（感觉访问变得更慢了）。所以本喵决定打造自己的过渡动画。

借鉴

在两三个月前记得访问过一个个人博客，过渡动画非常惊艳，但当时并没有时间详细琢磨实现细节。如今正好借鉴一番，经过一番Google，还是本喵找到了（但是作者的博客好像没有维护了，无法访问），好在也是依托Github pages 挂载的博客，直接把源码下载下来进行研究。

地址： https://github.com/ceoimon/ce...

实现细节

动画并非纯css实现而是使用了SVG + CSS

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。 SVG由W3C制定，是一个开放标准。
既然是矢量图，它的缩放就不会失真，因为表示方法是基于数学的表示，而不是像素点。动画中的笔画即是基于SVG中path标签中的数据先后顺序。

#mySVG path {
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 11434;
  stroke-dashoffset: 11456;
  -webkit-animation: dash 5s linear infinite;
  animation: dash 5s linear infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
/*   -webkit-transition:fill 0.5s 1s linear;
  transition:fill 0.5s 1s linear;*/
}
@-webkit-keyframes dash {
  10% {
    stroke-dashoffset: 11456;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
    fill: #000;
  }
  95% {
    stroke-dashoffset: 11456;
    fill: #000;
  }
  100% {
    stroke-dashoffset: 11456;
    fill: transparent;
  }
}

不过当我理解了这svg两个属性(stroke-dasharray，stroke-dashoffset)后，还是非常震惊于这个动画的实现原理。

stroke-dasharray属性可控制用来描边的点划线的图案范式。

MDN给出的示例：

stroke-dashoffset属性指定了dash模式到路径开始的距离

通过CSS修改这两个属性，动画的边界就相应的动起来了。

我的实现

我的素材：

使用 AI 得到 SVG，最终效果：

GeekCat体验

超融合服务器云服务器翻转过渡动画 squid打造自己的cdn 打造自己的云服务器 ios过渡动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116429.html

CSS 小结笔记之变形、过渡与动画

摘要：变形变形移动移动可以指定像素值也可以指定百分比，注意指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐在设置后再移动自身的即可。方向上的移动在现实生活中是距离变远，距离变近。1、过渡transition 过渡属性用法： transition :ransition-property transition-durationtransition-timing-functiontra...

番茄西红柿 2019-04-23 13:22 评论0 收藏0
「码个蛋」2017年200篇精选干货集合

摘要：让你收获满满码个蛋从年月日推送第篇文章一年过去了已累积推文近篇文章，本文为年度精选，共计篇，按照类别整理便于读者主题阅读。本篇文章是今年的最后一篇技术文章，为了让大家在家也能好好学习，特此花了几个小时整理了这些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 让你收获满满！码个蛋从2017年02月20...

wangtdgoodluck 2019-07-30 15:40 评论0 收藏0
SVG

摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。使用SVG + CSS实现动态霓虹灯文字效果早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

104828720 2019-08-29 14:00 评论0 收藏0
匠心打造Vue侧滑菜单组件

摘要：本文介绍一个简单的类似的布局组件的实现，基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

sutaking 2019-08-22 11:20 评论0 收藏0
匠心打造Vue侧滑菜单组件

摘要：本文介绍一个简单的类似的布局组件的实现，基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时，应触发默认事件，比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

张利勇 2019-08-05 12:38 评论0 收藏0