牙叔教程 简单易懂
效果展示
缘起
群里有人问如何加载3D立方体动画
环境
手机: Mi 11 Pro
Android版本: 11
Autojs版本: 9.0.9
思路
- 百度一个立方体css代码
- autojs使用webview加载html
代码讲解
1. main.js
"ui"; ui.layout( <vertical> <webview id="webview" h="*" w="*" /> </vertical> ); let filePath = files.path("./index.html"); ui.webview.loadUrl("file://" + filePath);
2. project.json
{ "name": "新建项目", "main": "main.js", "useFeatures": [], "ignore": [ "build" ], "packageName": "com.example", "versionName": "1.0.0", "versionCode": 1 }
3. index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>牙叔教程</title> <style> /* 制作动画的关键字@keyframes */ @keyframes rotate { 100% { /* 按(-1,1,0)这个矢量方向旋转360度，之所以不选坐标轴，是为了能看到六个面~ */ transform: rotate3D(-1, 1, 0, 360deg); } } body { /* 视角距离，给3D元素的父亲，否则无法看到3D效果 */ perspective: 1000px; } section { position: relative; width: 300px; height: 300px; line-height: 300px; text-align: center; font-size: 50px; margin: 300px auto; /* 使子元素以3D形式显示，默认是2D，没有立体感 */ transform-style: preserve-3d; /* 动画调用 调用名为rotate的动画，执行周期是5s，线性速度变化，永久变化 */ animation: rotate 5s linear infinite; } div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* rotateX是以X轴为旋转轴，translate移动的位置是以旋转后的面为X-Y平面，不是以旋转前的面，这一点一定要理解。 */ /* 前面 */ div:nth-child(1) { /* 前面先旋转0度，然后在3D空间内，往面向用户的方向前进50px */ transform: rotateY(0deg) translateZ(150px); background-color: purple; } /* 后面 */ /* 后面先旋转180度，然后在3D空间内，往面向用户的方向前进50px，注意此时已经旋转到了背面，用户是面向背面了 */ div:nth-child(2) { transform: rotateY(180deg) translateZ(150px); background-color: rgb(32, 128, 0); } /* 上面 */ div:nth-child(3) { transform: rotateX(90deg) translateZ(150px); background-color: rgb(73, 63, 170); } /* 下面 */ div:nth-child(4) { transform: rotateX(-90deg) translateZ(150px); background-color: rgb(194, 110, 33); } /* 左面 */ div:nth-child(5) { transform: rotateY(-90deg) translateZ(150px); background-color: rgb(48, 201, 168); } /* 右面 */ div:nth-child(6) { transform: rotateY(90deg) translateZ(150px); background-color: pink; } </style> </head> <body> <section> <div>牙叔教程</div> <div>牙叔教程</div> <div>牙叔教程</div> <div>牙叔教程</div> <div>牙叔教程</div> <div>牙叔教程</div> </section> </body> </html>
参考
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
