QQ小程序页面加载动画案例教程源码

本篇文章主要是讲QQ小程序页面加载动画教程，因为和微信小程序加载动画同理，所以大家都可以互相使用，快来给自己的小程序加上创意加载动画吧~

最近自己有在网上找小程序动画效果和小程序动画库，结果发现基本上要么是太烦杂，要么是太丑陋，后面我又找了一下小程序loading动画和小程序交互动画，结果发现一个不错的案例分享，这里也分享给大家，当然啦，自然是微信和QQ小程序都可以用的案例啦~

先给大家看一下其中几种效果：

然后是QQ小程序制作教程源码【seo词汇不影响主题：QQ小程序官方源码社区】：

wxml代码：

<view class="container">
    <view id="loading" hidden="{{loadingHidden}}">
        <view id="loading-center">
            <view id="loading-center-absolute">
                <view class="object" id="object_one"></view>
                <view class="object" id="object_two"></view>
                <view class="object" id="object_three"></view>
                <view class="object" id="object_four"></view>
                <view class="object" id="object_five"></view>
                <view class="object" id="object_six"></view>
                <view class="object" id="object_seven"></view>
                <view class="object" id="object_eight"></view>
                <view class="object" id="object_big"></view>
            </view>
        </view>
    </view>
</view>

js代码：

先在data中设置好默认为加载层启动

 data: {
    loadingHidden: true
  },

然后在加载完毕事件中加上如下代码即可【设置加载层为关闭】

  this.setData({
     loadingHidden: false
    });

最后是wxss样式：

#loading{
    background-color: #db9e36;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
  }
  #loading-center{
    width: 100%;
    height: 100%;
    position: relative;
    }
  #loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 150px;
    width: 150px;
    margin-top: -75px;
    margin-left: -75px; 
    -ms-transform: rotate(45deg); 
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); 
  }
  .object{
    width: 20px;
    height: 20px;
    background-color:#FFF;
    position: absolute;
    left: 65px;
    top: 65px;
    }
  .object:nth-child(2n+0) {
    margin-right: 0px;
  }
  #object_one {
    -webkit-animation: object_one 2s infinite;
    animation: object_one 2s infinite;
    -webkit-animation-delay: 0.2s; 
      animation-delay: 0.2s; 
    }
  #object_two {
    -webkit-animation: object_two 2s infinite;
    animation: object_two 2s infinite;
    -webkit-animation-delay: 0.3s; 
      animation-delay: 0.3s; 
    }
  #object_three {
    -webkit-animation: object_three 2s infinite;
    animation: object_three 2s infinite;
    -webkit-animation-delay: 0.4s; 
      animation-delay: 0.4s; 
    }
  #object_four {
    -webkit-animation: object_four 2s infinite;
    animation: object_four 2s infinite;
    -webkit-animation-delay: 0.5s; 
      animation-delay: 0.5s; 
  }
  #object_five {
    -webkit-animation: object_five 2s infinite;
    animation: object_five 2s infinite;
    -webkit-animation-delay: 0.6s; 
      animation-delay: 0.6s; 
  }
  #object_six {
    -webkit-animation: object_six 2s infinite;
    animation: object_six 2s infinite;
    -webkit-animation-delay: 0.7s; 
      animation-delay: 0.7s; 
  }
  #object_seven {
    -webkit-animation: object_seven 2s infinite;
    animation: object_seven 2s infinite;
    -webkit-animation-delay: 0.8s; 
      animation-delay: 0.8s; 
  }
  #object_eight {
    -webkit-animation: object_eight 2s infinite;
    animation: object_eight 2s infinite;
     -webkit-animation-delay: 0.9s; 
      animation-delay: 0.9s; 
  }
  #object_big{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50px;
    top: 50px;
    -webkit-animation: object_big 2s infinite;
    animation: object_big 2s infinite;
    -webkit-animation-delay: 0.5s; 
      animation-delay: 0.5s; 
  } 
  @-webkit-keyframes object_big {
   50% { -webkit-transform: scale(0.5); }
  }
  @keyframes object_big {
   50% { 
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
    } 
  }
  @-webkit-keyframes object_one {
   50% { -webkit-transform: translate(-65px,-65px)  ; }
  }
  @keyframes object_one {
   50% { 
      transform: translate(-65px,-65px) ;
      -webkit-transform: translate(-65px,-65px) ;
    } 
  }
  @-webkit-keyframes object_two {
    50% { -webkit-transform: translate(0,-65px) ; }
  }
  @keyframes object_two {
   50% { 
      transform: translate(0,-65px) ; 
      -webkit-transform: translate(0,-65px) ; 
    } 
  }
  @-webkit-keyframes object_three {
   50% { -webkit-transform: translate(65px,-65px) ; }
  }
  @keyframes object_three {
   50% { 
      transform: translate(65px,-65px) ;
      -webkit-transform: translate(65px,-65px) ;
    } 
  }
  @-webkit-keyframes object_four {
    50% { -webkit-transform: translate(65px,0) ; }
  }
  @keyframes object_four {
    50% { 
      transform: translate(65px,0) ;
      -webkit-transform: translate(65px,0) ;
    } 
  }
  @-webkit-keyframes object_five {
    50% { -webkit-transform: translate(65px,65px) ; }
  }
  @keyframes object_five {
    50% { 
      transform: translate(65px,65px) ;
      -webkit-transform: translate(65px,65px) ;
    } 
  }
  @-webkit-keyframes object_six {
    50% { -webkit-transform: translate(0,65px) ; }
  }
  @keyframes object_six {
    50% { 
      transform:  translate(0,65px) ;
      -webkit-transform:  translate(0,65px) ;
    } 
  }
  @-webkit-keyframes object_seven {
    50% { -webkit-transform: translate(-65px,65px) ; }
  }
  @keyframes object_seven {
    50% { 
      transform: translate(-65px,65px) ;
      -webkit-transform: translate(-65px,65px) ;
    } 
  }
  @-webkit-keyframes object_eight {
    50% { -webkit-transform: translate(-65px,0) ; 
  }
  @keyframes object_eight {
    50% { 
      transform: translate(-65px,0) ;
      -webkit-transform: translate(-65px,0) ;
    } 
  }
}

好了，今天QQ小程序源码网的分享就到此结束，部分内容来源于：https://www.jianshu.com/p/6c29bfaebf61

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » QQ小程序页面加载动画案例教程源码