upd: 调整 动态 icon 接入方式 (#970)

upd: 调整 动态 icon 接入方式 #970

src/packages/__VUE/icon/demo.vue

@@ -42,8 +42,11 @@
       <nut-cell>
         <ul>
           <li v-for="it in item.icons" :key="it">
-            <nut-icon :name="it.name" :class="`nut-icon-${it.am}`"></nut-icon>
-            <span>{{ it.am }}</span>
+            <nut-icon
+              :name="it.name"
+              :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
+            ></nut-icon>
+            <span>{{ it['animation-name'] }}</span>
           </li>
         </ul>
       </nut-cell>

src/packages/__VUE/icon/doc.md

@@ -63,19 +63,28 @@ app.use(Icon);
 :::
 ### 通用动态图标
 
-添加指定的 class 类就可以实现图片动态效果
+添加指定的 class 类就可以实现图片动态效果，默认是播放1次，添加 `nut-icon-am-infinite` 类即可实现循环播放。通过设置 css 可实现动画启动前的延迟间隔、动画在多久时间内完成
 
 :::demo
 ```html
 <template>
-  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump"></nut-icon>
-  <nut-icon name="star-fill-n" class="nut-icon-am-blink"></nut-icon>
-  <nut-icon name="refresh2" class="nut-icon-am-rotate"></nut-icon>
+  <nut-icon name="dou-arrow-up" class="nut-icon-am-jump nut-icon-am-infinite"></nut-icon>
+  <nut-icon name="star-fill-n" class="nut-icon-am-blink nut-icon-am-infinite"></nut-icon>
+  <nut-icon name="refresh2" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>
 </template>
+
+<style>
+  .nut-icon{
+    --animate-duration: 1s ; 
+    --animate-delay: 0s;
+  }
+</style>
 ```
 :::
 
 
+
+
 ### 自定义图标
 
 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

src/packages/__VUE/icon/index.scss

@@ -26,56 +26,106 @@
     animation: rotate 1s infinite linear;
   }
 
+  --animate-duration: 1s;
+  --animate-delay: 1s;
+
+  &-am-infinite {
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
   &-am-jump {
-    animation: jump 1s ease infinite alternate;
+    -webkit-animation-name: nutJumpOne;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutJumpOne;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-name: nutJump;
+      animation-name: nutJump;
+    }
   }
 
   &-am-rotate {
-    animation: rotate 1s infinite linear;
+    -webkit-animation-name: rotation;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: rotation;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
   }
   &-am-blink {
-    animation: blink 1s ease-in-out 0.1s infinite alternate;
-  }
-}
+    -webkit-animation-name: nutBlink;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
 
-@-webkit-keyframes jump {
-  to {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+    animation-name: nutBlink;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
   }
-}
+  &-am-breathe {
+    -webkit-animation-name: nutBreathe;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
 
-@keyframes jump {
-  to {
-    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+    animation-name: nutBreathe;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
   }
-}
+  &-am-flash {
+    -webkit-animation-name: nutFlash;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
 
-@-webkit-keyframes rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+    animation-name: nutFlash;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
   }
-}
+  &-am-bounce {
+    -webkit-animation-name: nutBounce;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+    animation-name: nutBounce;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
 
-@-webkit-keyframes blink {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
   }
-}
-@keyframes blink {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
+
+  &-am-shake {
+    -webkit-animation-name: nutShake;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutShake;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
   }
 }

src/packages/styles/animation/icon.scss

@@ -0,0 +1,245 @@
+// 跳动
+@-webkit-keyframes nutJump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+}
+
+@keyframes nutJump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+}
+
+@-webkit-keyframes nutJumpOne {
+  50% {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1) translateY(0);
+  }
+}
+
+@keyframes nutJumpOne {
+  50% {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1) translateY(0);
+  }
+}
+
+// 闪烁
+@-webkit-keyframes nutBlink {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes nutBlink {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// 呼吸
+@-webkit-keyframes nutBreathe {
+  from,
+  to {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+@keyframes nutBreathe {
+  from,
+  to {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+// 闪现
+@-webkit-keyframes nutFlash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+@keyframes nutFlash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+// 弹动
+@-webkit-keyframes nutBounce {
+  from,
+  20%,
+  53%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+}
+
+@keyframes nutBounce {
+  from,
+  20%,
+  53%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+}
+
+// 抖动
+@-webkit-keyframes nutShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes nutShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}

src/packages/styles/animation/index.scss

@@ -4,3 +4,4 @@
 @import 'ease.scss';
 @import 'drop.scss';
 @import 'rotate.scss';
+@import 'icon.scss';

src/packages/styles/font/config.json

@@ -123,14 +123,33 @@
     {
       "name": "通用动态样式",
       "icons": [{
-        "name":"locationg3",
-        "am":"am-jump"
+        "name":"dou-arrow-up",
+        "animation-name":"am-jump",
+        "animation-time":"am-infinite"
       },{
-        "name":"star-fill-n",
-        "am":"am-blink"
+        "name":"star",
+        "animation-name":"am-blink",
+        "animation-time":"am-infinite"
       },{
         "name":"refresh2",
-        "am":"am-rotate"
+        "animation-name":"am-rotate",
+        "animation-time":"am-infinite"
+      },{
+        "name":"heart-fill",
+        "animation-name":"am-breathe",
+        "animation-time":"am-infinite"
+      },{
+        "name":"microphone",
+        "animation-name":"am-flash",
+        "animation-time":"am-infinite"
+      },{
+        "name":"download",
+        "animation-name":"am-bounce",
+        "animation-time":"am-infinite"
+      },{
+        "name":"message",
+        "animation-name":"am-shake",
+        "animation-time":"am-infinite"
       }
       ]
     }

src/sites/mobile-taro/vue/project.config.json

@@ -31,15 +31,15 @@
       "outputPath": ""
     },
     "enableEngineNative": false,
-    "useIsolateContext": false,
+    "useIsolateContext": true,
     "userConfirmedBundleSwitch": false,
     "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "disableUseStrict": false,
-    "minifyWXML": true,
     "showES6CompileOption": false,
-    "useCompilerPlugins": false
+    "useCompilerPlugins": false,
+    "minifyWXML": true
   },
   "compileType": "miniprogram",
   "simulatorType": "wechat",

src/sites/mobile-taro/vue/src/base/pages/icon/index.vue

@@ -27,7 +27,7 @@
       <nut-icon name="dongdong" size="26"></nut-icon>
     </nut-cell>
 
-    <nut-cell-group v-for="item in icons.data" :title="item.name">
+    <nut-cell-group v-for="item in icons.data" :title="item.name" :key="item">
       <nut-cell>
         <ul>
           <li v-for="item in item.icons" :key="item">
@@ -37,6 +37,20 @@
         </ul>
       </nut-cell>
     </nut-cell-group>
+
+    <nut-cell-group v-for="item in icons.style" :title="item.name" :key="item">
+      <nut-cell>
+        <ul>
+          <li v-for="it in item.icons" :key="it">
+            <nut-icon
+              :name="it.name"
+              :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
+            ></nut-icon>
+            <span>{{ it['animation-name'] }}</span>
+          </li>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>