[HTML] 使用anime.js实现Win10 LodingRing 的样式

最新推荐文章于 2022-08-22 16:34:12 发布
最新推荐文章于 2022-08-22 16:34:12 发布
阅读量506 收藏 1
点赞数 1
分类专栏： Web 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q886yes/article/details/104569532
版权
预览

废话不多说，先来预览一下效果（windows 原生的 lodingring 在uwp应用中的样式可以在windows sdk中找到，我将其移植到了WPF中*）

  • WPF中样式
    在这里插入图片描述
  • JS样式
    在这里插入图片描述
    当然了，JS中动画的参数也是我根据UWP移植过来的（无情的搬运工）
    可以看到，动画基本如出一辙
实现

作为一名c#开发者，现在还做WPF桌面应用的应该已经绝无仅有了，但是我最初学这个框架也是被Windows和VisualStudio的扁平UI吸引的。在WPF中可以相对容易的同步应用与Windows的风格，包括一些系统UI的样式。
好了，废话不多说，来看今天的主角 —— Win10加载圆环

我给你们看看WPF动画的源码吧

   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1"
                                                                   Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="0">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="00:00:00.167">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="00:00:00.334">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="00:00:00.501">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="00:00:00.668">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E6"
                                                                       Storyboard.TargetProperty="Opacity"
                                                                       BeginTime="00:00:00.835">
                                            <DiscreteDoubleKeyFrame KeyTime="0"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.21"
                                                                    Value="1" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.22"
                                                                    Value="0" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:3.47"
                                                                    Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1R"
                                                                       BeginTime="0"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-110"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="10"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="93" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="205"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="357"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="439" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="585"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E2R"
                                                                       BeginTime="00:00:00.167"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-116"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="4"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="87" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="199"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="351"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="433" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="579"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E3R"
                                                                       BeginTime="00:00:00.334"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-122"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="-2"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="81" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="193"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="345"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="427" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="573"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E4R"
                                                                       BeginTime="00:00:00.501"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-128"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="-8"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="187"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="339"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="421" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="567"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E5R"
                                                                       BeginTime="00:00:00.668"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-134"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="-14"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="69" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="181"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="331"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="415" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="561"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E6R"
                                                                       BeginTime="00:00:00.835"
                                                                       Storyboard.TargetProperty="Angle">
                                            <SplineDoubleKeyFrame KeyTime="0"
                                                                  Value="-140"
                                                                  KeySpline="0.13,0.21,0.1,0.7" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.433"
                                                                  Value="-20"
                                                                  KeySpline="0.02,0.33,0.38,0.77" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.2"
                                                                  Value="63" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:1.617"
                                                                  Value="175"
                                                                  KeySpline="0.57,0.17,0.95,0.75" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.017"
                                                                  Value="325"
                                                                  KeySpline="0,0.19,0.07,0.72" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:2.783"
                                                                  Value="409" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:3.217"
                                                                  Value="555"
                                                                  KeySpline="0,0,0.95,0.37" />
                                        </DoubleAnimationUsingKeyFrames>

由于是 xaml 生成的动画，没办法循环设置参数（UWP源码中也是如此），当时看到的时候就在想，调这个参数的美工真TM是个天才…
可以看到，其中有许多的贝塞尔缓动关键帧，要是用原生CSS3实现的话似乎有些麻烦，而且也不知道切换缓动函数的时候润不润，不润的话就很难受了，于是我就找到了anime.js这个动画库，刚好发现了其可以实现这个级别的动画。

/**
 * @param  {} size     : int        the rect clip width of the loding svg
 * @param  {} dotsize  : int        the r of a loading dot
 * @param  {} dotcolor : "#xxxxxx"  the color of the dot
 */
function CreateLodingRing(size, dotsize, dotcolor) {
  //#region Create Element
  var ring = Object();

  let loadingring = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  loadingring.id = "winloding";
  loadingring.setAttribute("viewBox", "0 0" + " " + size + " " + size);
  for (let i = 0; i < 6; i++) {
    let dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    dot.style.transformOrigin = "center center";
    dot.style.opacity = 0;
    dot.setAttribute("class", "d" + (i + 1));
    dot.setAttribute("fill", dotcolor);
    dot.setAttribute("cx", size / 2);
    dot.setAttribute("cy", dotsize + 2);
    dot.setAttribute("r", dotsize);
    loadingring.appendChild(dot);
  }
  document.body.appendChild(loadingring);
  console.log(loadingring);

  //#endregion
  var tl = anime.timeline({
    loop: true
  });
  // #region add animation
  // tl.add({
  //   targets: "#winloding d1",
  //   rotate: [
  //     { value: -110, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //     { value: 10, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //     { value: 93, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //     { value: 205, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //     { value: 357, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //     { value: 439, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //     { value: 585, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //   ]
  // })
  //   .add(
  //     {
  //       targets: "#winloding d2",
  //       rotate: [
  //         { value: -116, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //         { value: 4, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //         { value: 87, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 199, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //         { value: 351, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //         { value: 433, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 579, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //       ]
  //     },
  //     167
  //   )
  //   .add(
  //     {
  //       targets: "#winloding d3",
  //       rotate: [
  //         { value: -122, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //         { value: -2, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //         { value: 81, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 193, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //         { value: 345, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //         { value: 427, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 573, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //       ]
  //     },
  //     334
  //   )
  //   .add(
  //     {
  //       targets: "#winloding d4",
  //       rotate: [
  //         { value: -128, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //         { value: -8, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //         { value: 75, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 187, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //         { value: 339, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //         { value: 421, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 567, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //       ]
  //     },
  //     501
  //   )
  //   .add(
  //     {
  //       targets: "#winloding d5",
  //       rotate: [
  //         { value: -134, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //         { value: -14, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //         { value: 69, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 181, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //         { value: 331, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //         { value: 415, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 561, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //       ]
  //     },
  //     668
  //   )
  //   .add(
  //     {
  //       targets: "#winloding d6",
  //       rotate: [
  //         { value: -140, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
  //         { value: -20, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
  //         { value: 63, duration: 767, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 175, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
  //         { value: 325, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
  //         { value: 409, duration: 766, easing: "cubicBezier(0, 0, 1, 1)" },
  //         { value: 555, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
  //       ]
  //     },
  //     835
  //   );
  // #endregion

  for (let i = 0; i < 6; i++) {
    let basevalue = -110 - 6 * i;

    tl.add(
      {
        targets: "#winloding .d" + (i + 1),
        rotate: [
          { value: basevalue, duration: 0, easing: "cubicBezier(0.13,0.21,0.1,0.7)" },
          { value: basevalue + 120, duration: 433, easing: "cubicBezier(0.02,0.33,0.38,0.77)" },
          { value: basevalue + 203, duration: 767, easing: "linear" },
          { value: basevalue + 315, duration: 417, easing: "cubicBezier(0.57,0.17,0.95,0.75)" },
          { value: basevalue + 467, duration: 400, easing: "cubicBezier(0,0.19,0.07,0.72)" },
          { value: basevalue + 549, duration: 766, easing: "linear" },
          { value: basevalue + 695, duration: 434, easing: "cubicBezier(0,0,0.95,0.37)" }
        ],
        opacity: [
          { value: 1, duration: 1, easing: "linear" },
          { value: 1, duration: 3210, easing: "linear" },
          { value: 0, duration: 10, easing: "linear" },
          { value: 0, duration: 260, easing: "linear" }
        ]
      },
      167 * i
    );
  }

  ring.timeline = tl;
  ring.svgitem = loadingring;

  return ring;
}

JS中的参数与WPF一模一样，这应该是最贴近Win10原版的动画样式了[狗头]（不常用JS，写的不好请见谅）。

解释一下 （*）标注的问题，由于WPF动画不能将动画参数作为动态绑定源，因此和UWP中的实现是稍微有区别的，不是复制粘贴就行

Y_Theta
关注
专栏目录
[HTML] 使用anime.js实现Win10 加载条动画的样式
Y_Theta
03-02 709
预览 上一篇中我介绍了使用anime.js实现win10加载圆环的动画，这次我们实现的是win10加载条的动画，这个动画你也应该在Win10上许多地方都能看到，下面就来看预览吧 WPF 中原生样式 JS样式 源码 话不多说，相信看到效果你也会发现，因为有WPF版本的参数作为基础，JS版本实现的已经非常接近原生样式了，下面就直接上JS的源码 ，函数生成的是一个Lodingba...
js面向对象实现win10计算功能（es6新语法项目的简单启动方式）
Rookie
04-05 831
此篇是继续上篇的内容的补充，上篇博客只完整了基本面向对象的框架搭建等步骤，而最重要的核心算法部分却未讲解，此篇博客将详细的讲解如何实现win10基本计算器的后台算法。 由于篇幅有限，这里我只讲解算法，完整源码可以点击右边github链接获取：win10计算器代码（源码里还有详细的功能介绍文档） 注意：由于此项目运用到了es6的面向对象语法，所以不能通过html页面直接运行，这里给不会运行的朋友介绍...
html动画引擎,Github非常惊艳的轻量级开源动画引擎——Animejs
weixin_32098191的博客
06-03 527
介绍Anime.js是一个轻量级的JavaScript动画库，具有简单但功能强大的API。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。Github在Github上已收获近35k的star数，可见其非常受广大使用者的热爱！https://github.com/juliangarnier/anime/特性复杂的交错动画变得简单css分层转换在单个HTML元素上同时以不同的时间...
CSS实现WIN10 Loading效果
01-07
基于CSS3实现的Windows10的Loading效果代码，黑色背景
Loading等待动画（waiting animation）
知屋安砖
01-02 801
Loading等待动画示例HTMLCSS 示例 HTML <div class="logo"></div> <div class="star"> <div class="point"></div> <div class="point"></div> <div class="point"><...
vue-animejs Vue的简单anime.js指令。-Vue.js开发
05-27
Vue-Anime适用于Anime.js的简单Vue绑定安装$ npm install --save vue-animejs从'vue-animejs'导入VueAnime; Vue.use（VueAnime）用法为Anime.js添加Vue-Anime简单Vue绑定。安装$ npm install --save vue-animejs从'...
anime.js 实现带有描边动画效果的复选框（推荐）
10-18
anime.js 是一款强大的轻量级JavaScript动画库，它支持对CSS、个别变换、SVG、DOM属性和JS对象等多种元素进行动画处理。这个库的特点在于它提供了详细的动画参数设定，允许开发者精确控制动画的目标值，同时支持多组...
基于anime.js实现动态圆形轮播图视觉差特效.zip
11-21
【标题】"基于anime.js实现动态圆形轮播图视觉差特效.zip"的项目是一个使用HTML5技术，并结合anime.js库创建的创新性视觉效果。anime.js是一个强大的JavaScript动画库，它简化了在网页上实现复杂动画的过程。在这个...
anime.min.js
04-07
www.animejs.cn 制作所有强大的动画的js 非常 6 推荐大家学习一下 强烈推荐！！！
HTML5微软Win10转圈加载开机动画的纯CSS3实现
10-18
首发实现，关于这精致的动画，网上已有些相关实现方案，唯独没有HTML5实现，笔者在此给出纯CSS3实现的版本，化繁为简。以最简洁的方式实现最接近原生的效果，并在此基础上加入了增强色彩渐变。 不可否认，原生动画更加的流畅自然。为了接近自然，测试过很多参数
js实现页面加loading提示效果
05-05
js实现页面加loading提示效果,只需要将js引入，然后再需要的时候调用showLoading().当业务逻辑处理完毕后调用completeLoading（）就可以关闭loading。非常方便、比较好用。
Win10风格Html模板
04-08
Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件，兼容主流现代浏览器及移动端的屏幕尺寸，适合快速开发后台管理系统的前端界面
仿win10的html模板
10-11
一个模仿win10的html模板，页面很流畅，非常漂亮。仅供参考，仅用于个人做本地demo用
HTML5高端大气炫酷仿Win10桌面系统网站模板.zip
05-12
HTML5高端大气炫酷仿Win10桌面系统网站模板下载。Win10风格后台管理模板，一款基于Layui的前端模板，快速打造Win10风格Web前端后台管理界面模板下载。针对略懂前端的后端人员定做。它本身具有丰富的API和配置，让你以很少的前端代码，快速打造一个Win10版的Web管理系统模板。
jsAnimate:一个js特效插件库jsAnimate，无需css即可实现懒加载过渡动画（结合了animate.css、wow.js、vue-transition的特点）、轮播图、旋转木马等特效。 a js-efficiency-plugin, no need css
04-28
jsAnimate（只需一个 js，无须 css，即可实现懒加载过渡动画（综合实现了类似 animate.css、wow.js、vue-transition 的功能）、轮播图、旋转木马等特效，可在页面任一处复用，自适应页面尺寸变化，所有方法都在 jsAnimate 对象中调用） 使用：(文档中有在线查看 demo 和教程的链接) 有效文件： dist 文件夹中打包后的 jsAnimate.js 如果你通过[removed]方式使用 jsAnimate.js，你可以通过 window.jsAnimate 全局变量来使用 jsAnimate 对象 [removed][removed] 同时 jsAnimate.js 也支持通过 ES6 模块化的方式引入 import jsAnimate from 'jsAnimat
loading动画的性能优化-摒弃Canvas，拥抱CSS3-实现点击特效
weixin_34095889的博客
11-08 401
click-colorful demo演示 coldday.github.io/click-color… 项目中有个活动页加载时有个loading动画，效果如上图，连续绽放小球，问题就是太卡，经常出现一堆小球抱团卡住，遂进行优化 注意：（仅在页面加载时卡顿，加载完毕，点击的时候不卡顿） 查看代码发现动画借用的animejs 官网中的效果，通过canvas实现的，按理说canvas应该时性能很好的...
loading加载动画效果js实现
weixin_30820077的博客
02-28 467
<style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }.loading { height: 100%; background: url(images/loading.gif) no-repeat center; }...
圆形倒计时进度条(canvas,requestAnimationFrame)
panpanpanqaq的博客
08-14 1178
(function(exports) { ‘use strict’; let canvas = document.getElementById(‘timer-canvas’); let context = canvas.getContext(‘2d’); let centerX = canvas.width / 2; let centerY = canvas.height / 2; let ang...
加载loading动画
qq_40289557的博客
08-22 8001
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
用Anime.js给我写一个html具有连续动作的动态的火柴人
最新发布
07-17
当然，我可以使用Anime.js来为你创建一个具有连续动作的动态火柴人动画。请确保已经在HTML文件中引入了Anime.js库，然后可以使用以下代码： ```html <!DOCTYPE html> <html> 火柴人动画 #canvas { width: 400...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值