text: (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{uwN2:function(n,e,t){"use strict";t.r(e),t.d(e,"_frontmatter",(function(){return s})),t.d(e,"default",(function(){return p}));var a=t("zLVn"),r=(t("q1tI"),t("7ljp")),s={title:"实现一个环境路径动画",slug:791788145,date:"2021-01-22T07:58:29.000Z",tags:["标签"],categories:["未分类"],keywords:["关键册"]},i={_frontmatter:s};function p(n){var e=n.components,t=Object(a.a)(n,["components"]);return Object(r.mdx)("wrapper",Object.assign({},i,t,{components:e,mdxType:"MDXLayout"}),Object(r.mdx)("h2",null,"设置头像按照环形持续运动"),Object(r.mdx)("p",null,"定义一个简单的 HTML 结构："),Object(r.mdx)("pre",null,Object(r.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'<div class="wrap">\n  <img class="avatar" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=320178652,790985626&fm=27&gp=0.jpg" />\n</div>\n')),Object(r.mdx)("p",null,"我们先来写下 CSS："),Object(r.mdx)("pre",null,Object(r.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),".wrap {\n  width: 300px;\n  height: 300px;\n  border-radius: 50%;\n  background: #007fff;\n}\n.avatar {\n  display: block;\n  margin: 0 auto;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  transform-origin: 50% 150px; /** 150px 是因为父元素 .wrap 宽度等于 300px */\n  animation: spin 8s infinite linear;\n}\n@keyframes spin {\n  to { transform: rotate(1turn); }\n}\n")),Object(r.mdx)("p",null,"这里要解释一点，即 .avatar 需要居中，所以才设置了 margin: 0 auto，这样我们在设置transform-origin: 50% 150px 才能使其原点居于父元素中心点，从而围绕该原点旋转。"),Object(r.mdx)("p",null,"到现在为止，我们已经成功让该头像围绕环形路径进行旋转了，但是我们还想进一步优化。"),Object(r.mdx)("p",null,"如果你仔细观察，会发现，头像在围绕环形运动的时候，其自身也会进行旋转，这就会到导致其旋转到 180 度的时候（即 .wrap 底边中心处），头像朝向下方，我们想要其头像不管何时其朝向都为上，换句话说，头像自身不允许旋转。"),Object(r.mdx)("p",null,"或许你可能会说，这并不会影响什么，但是，如果是文字呢？那岂不是影响也阅读。"),Object(r.mdx)("h2",null,"实现头像朝向始终朝上，取消头像自身旋转"),Object(r.mdx)("p",null,"或许你使用或见过下面这段 CSS："),Object(r.mdx)("pre",null,Object(r.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),".box {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n")),Object(r.mdx)("p",null,"上面的 CSS 使得 .box 元素水平垂直居中，核心点通过 translate(-50%, -50%) 来抵消自身一半的偏移量。"),Object(r.mdx)("p",null,"既然，有了抵消的思想，我们也可以借助 .avatar 外层元素的反向旋转来抵消 .avatar 的正向旋转。"),Object(r.mdx)("p",null,"修改下 HTML 结构："),Object(r.mdx)("pre",null,Object(r.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'<div class="wrap">\n    <div class="avatar">\n        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=320178652,790985626&fm=27&gp=0.jpg" />\n    </div>\n</div>\n')),Object(r.mdx)("p",null,"一般的，对于静态元素，我们可以指定具体的值来抵消，比如 60deg，可以用 -60deg（或300deg）来抵消，但是这里我们是动态的，肯定不可能这么写。"),Object(r.mdx)("p",null,"对于动态运动的，如果你理解了，可能会更简单："),Object(r.mdx)("pre",null,Object(r.mdx)("code",Object.assign({parentName:"pre"},{className:"language-css"}),".wrap {\n  width: 300px;\n  height: 300px;\n  border-radius: 50%;\n  background: #007fff;\n}\n.avatar {\n  width: 50px;\n  height: 50px;\n  margin: 0 auto;\n  border-radius: 50%;\n  overflow: hidden;\n  transform-origin: 50% 150px;\n  animation: spin 8s infinite linear;\n}\n.avatar > img {\n  width: 50px;\n  height: 50px;\n  animation: spin-reverse 8s infinite linear;\n}\n@keyframes spin {\n  to { transform: rotate(1turn); }\n}\n@keyframes spin-reverse {\n  from { transform: rotate(1turn); }\n}\n")),Object(r.mdx)("p",null,"在上面的 CSS 中，我们新定义了一个 spin-reverse 反向动画，一个结束，一个开始，实现运动抵消，进一步达到始终保持头像正确朝向的效果。"),Object(r.mdx)("p",null,"在线DEMO：",Object(r.mdx)("a",Object.assign({parentName:"p"},{href:"https://codepen.io/hcx/pen/VoLjaP"}),"https://codepen.io/hcx/pen/VoLjaP")))}p.isMDXComponent=!0},zLVn:function(n,e,t){"use strict";function a(n,e){if(null==n)return{};var t,a,r={},s=Object.keys(n);for(a=0;a<s.length;a++)t=s[a],e.indexOf(t)>=0||(r[t]=n[t]);return r}t.d(e,"a",(function(){return a}))}}]);
  //# sourceMappingURL=component---src-posts-791788145-md-72c6221166c264c38b1b.js.map