登录
目录
当前位置： 首页 > 文档资料 > Ionic 2 从入门到精通 >

项目：露营聊天软件（Camper Chat） - 第七课：自定义样式与动画

优质
小牛编辑
127浏览
2023-12-01

这节课中我们将稍稍改动一下模板添加一些类，我们还是创建一些自定义的样式，同时也将覆盖一些应用级的SASS变量。如果之前完成过其他原因，那么你基本知道本节课的实际内容不多，没有那么难，唯一不同的是我们将添加一些自定义动画。
动画，使用得当的话，可以让你的应用看起来，感觉起来质量更高。当使用不当的时候，适得其反，甚至引发效率问题。

基本样式

我们先添加全局基本样式让他稍微漂亮些。首先，我们将要修改variables文件进行大范围的修改。
> 修改 src/theme/variables.scss文件如下：

  1. $colors: (
  2.     primary: #5b91da,
  3.     secondary: #32db64,
  4.     danger: #f53d3d,
  5.     light: #f4f4f4,
  6.     dark: #222,
  7.     favorite: #69BB7B
  8. );
  10. $list-ios-border-color: #fff;
  11. $list-md-border-color: #fff;
  13. $button-ios-border-radius: 0px;

我们这里没有做太多，只是定义了一些我们需要用到的颜色，为Android和iOS设置了默认的边沿色，同时对iOS设置了按钮的圆角为0
px。（Android上按钮本来就是方形的）
同时我们需要去核心样式文件中定义一些应用级的样式。
> 将一下样式添加到 src/app/app.scss中：

  1. .logo {
  2.     max-height: 39px;
  3.     margin-top: 6px;
  4. }
  6. ion-menu ion-content {
  7.     background-image: url('../assets/images/login-background.png');
  8.     background-size: cover;
  9.     background-position-x: 40%;
  10. }
  12. ion-menu scroll-content {
  13.     margin-top: 44px;
  14. }
  16. ion-menu .item {
  17.     background-color: transparent;
  18.     color: #fff;
  19. }

我们稍微修改了logo的位置，给整个登录页加了个背景图，我们给菜单设置了一个边距，这样在真机上运行的时候显示内容看起来不会遮住状态栏，我们也把菜单项变透明了。
接下来，我们将修改登录页和主页，给他们添加一些自定义样式。
> 修改 src/pages/home/home.scss如下：

  1. page-home {
  3.     ion-label {
  4.         white-space: normal;
  5.     }
  7.     ion-row {
  8.         padding: 0;
  9.         margin: 0;
  10.     }
  12.     ion-col {
  13.         padding: 0;
  14.         margin: 0;
  15.     }
  17.     toolbar-content {
  18.         padding: 0;
  19.         margin: 0;
  20.     }
  21. }

这里没啥新奇的，我们只是修改了一些布局元素的排位，这样他们看起来漂亮些。
> 修改 src/pages/login/login.html为如下：

  1. <ion-content padding>
  2. <ion-row>
  3. <ion-col>
  4. <img src="assets/images/logo.png" class = "login-logo"/>
  5. </ion-col>
  6. </ion-row>
  7. <ion-row class="login-description">
  8. <ion-col>
  9. <p>Camper Chat allows you to talk to other <strong>caravaners,
  10. RV'ers, roadtrippers and campers</strong> near you. Use
  11. Camper Chat to give and receive tips, ask for help with your
  12. flat tyre, or just have a friendly chat.</p>
  13. <p>Log in with <strong>Facebook</strong> below to get started.</p>
  14. </ion-col>
  15. </ion-row>
  16. <ion-row>
  17. <ion-col>
  18. <a (click)="login()"><img src="assets/images/facebook-button.png" class="login-button" /></a>
  19. </ion-col>
  20. </ion-row>
  21. </ion-content>

> 修改 src/pages/login/login.scss 文件如下：

  1. page-login {
  2.     .scroll-content {
  3.         background-image: url('../assets/images/login-background.png');
  4.         background-size: cover;
  5.         background-position-x: 40%;
  6.         text-align: center;
  7.     } 
  9.     .login-description {
  10.         height: 60%;
  11.         line-height: 2em;
  12.     } 
  14.     .login-description p {
  15.         color: #fff;
  16.     } 
  18.     .login-button {
  19.         -webkit-box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.18);
  20.         -moz-box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.18);
  21.         box-shadow: 0px 6px 20px 0px rgba(0,0,0,0.18);
  22.     }
  23. }

这次我们给登录页模板添加了一些额外的类。在这个.scss文件中我们有设置了一个背景图（和登录页一样的）但是这次是应用到菜单去的。我们给描述内容进行了一些定位同时给Facebook登录按钮添加了一点阴影。
这就是基本样式的全部了，现在你的应用看起来应该是这样的：
效果图
效果图
我们还有一个最有趣的部分需要去做，就是添加一些动画。

创建动画

需要记住一个重要的事情使用translate3d属性去给元素制作动画（即使是用来制作2D动画）。通过使用这个属性，例如我们去操作left属性，就会调用设备的GPN(Graphics Processor Unit图形处理单元)。他会调用硬件加速来进行动画并且更流畅。你可能会发现在桌面浏览器上运行很流畅但是在真机上运行的时候效果却不是很好，所以使用硬件加速非常重要（尽管依赖GPU太多的话会有其他缺点，例如，电池掉太快）。
制作动画的话我们就要定义我们自己的keyframes。基本上，他让你指定动画过程的特定场景是的具体属性。例如：

  1. @-webkit-keyframes slideInSmooth {
  2.     0% {
  3.         -webkit-transform: translate3d(-100%,0,0);
  4.     }
  5.     100% {
  6.         -webkit-transform: translate3d(0,0,0);
  7.     }
  8. }

我们这里将的是动画开始(0%)元素应该向左偏移100%（这三个参数在translate3d中代表x，y和z轴），所以他应该是在屏幕外。然后在动画结束(100%)的时候元素应该回到了正常的位置。
我们可以这定义一个类似的哦那个话：

  1. @-webkit-keyframes slideInSmooth {
  2.     0% {
  3.         -webkit-transform: translate3d(-100%,0,0);
  4.     }
  6.     50% {
  7.         -webkit-transform: translate3d(50%,0,0);
  8.     }
  10.     100% {
  11.         -webkit-transform: translate3d(0,0,0);
  12.     }
  13. }

这样元素会从左边开始，然后回到右边，最终回到正常位置。你可以随你喜欢定义大量这样的中间步，唯一的重点是你只能有一个0%和100%（也只能是其中的值）否则，动画就无效。
我们只要创建一个类使用这个动画，然后给一个元素添加这个类就可以将动画附加到他上面去了。我们将不会去使用这些动画，我们会为用户照片和他们的信息创建一些类似的动画。
> 修改 src/app/app.scss为如下：

  1. @-webkit-keyframes animateInPrimary {
  2.     0% {
  3.         -webkit-transform: translate3d(-100%,0,0);
  4.     }
  6.     100% {
  7.         -webkit-transform: translate3d(0,0,0);
  8.     }
  9. } 
  11. @-webkit-keyframes animateInSecondary{
  12.     0% {
  13.         opacity: 0;
  14.     }
  16.     50% {
  17.         opacity: 0;
  18.     }
  20.     100% {
  21.         opacity: 1;
  22.     }
  23. } 
  25. .animate-in-primary {
  26.     -webkit-animation: animateInPrimary;
  27.     animation: animateInPrimary;
  28.     -webkit-animation-duration: 750ms;
  29.     animation-duraton: 750ms;
  30. }
  32. .animate-in-secondary {
  33.     -webkit-animation: animateInSecondary ease-in 1;
  34.     animation: animateInSecondary ease-in 1;
  35.     -webkit-animation-duration: 750ms;
  36.     animation-duraton: 750ms;
  37. }

这里我们创建了两个不同的动画。animateInPrimary动画将使元素从左边屏幕外开始，滑动到他的普通位置。animateSecondary动画从完全透明到后半程逐步显现出来。
我们将这两个动画分成两个类，动画设置都是750ms。要用上他们的话，我们只需要把animate-in-primary和aniamte-in-secondary附件到元素上去即可。
> iugai src/pages/home/home.html的列表如下：

  1. <ion-list no-lines>
  2.     <ion-item *ngFor="let message of messages">
  3.         <ion-avatar item-left class="animate-in-primary">
  4.             <img [src]="message.picture">
  5.         </ion-avatar>
  7.         <div class="animate-in-secondary">
  8.             <h2>{{message.username}}</h2>
  9.             <p>{{message.message}}</p>
  10.         </div>
  11.     </ion-item>
  12. </ion-list>

看到没，我们给avatar添加了primary animation，给信息区域添加了secondary animation。如果重新加载应用的话就可以看到元素动画了。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn