1、CSS动画
1、元素2D变换transform
/* 1、平移:translate(水平平移量,竖直平移量) */
transform: translate(100px,200px);
/* 2、旋转:rotate(角度值deg),顺时针为正方向 */
/* 默认旋转函数是沿着z轴进行旋转的 */
transform: rotate(45deg);
/* 3、缩放:scale(比率) */
transform: scale(2);
/* 4、skew(角度值deg) */
transform: skew(45deg);
2、transition过渡动画
/* 定义初始状态 */
transform: translateX(0px);
/* transition: all 1s ease-in; */
/* 播放过度动画至少包含 transition-property transition-duration */
/* 指定css属性能够产生过度动画 */
transition-property: left, transform;
/* transition-property 还有两个待选项
none: 无
all: 所有属性都能播放过渡动画
*/
transition-property: all;
/* 动画播放的时长 */
transition-duration: 2s;
/* 动画播放的速度曲线 */
/* 待选项
linear: 匀速直线运动
ease-in: 慢进
ease-out: 慢出
ease-in-out: 慢进慢出
cubic-bezier: 曲线函数
*/
transition-timing-function: linear;
/* 动画播放延迟 */
transition-delay: 3s;
/* 合成属性
语法:
transition: property duration timing-function delay;
*/
transition: all 3s linear 3s;
3、应用
在学习了CSS动画相关知识点之后,并在老师的帮助下用JavaScript代码实现了时钟的效果,完成的过程分为几个步骤:
(1)首先进行表盘的构造,创建刻度的html模板;寻找旋转中心并进行验证;通过 js 代码循环渲染刻度 。
(2)给表盘添加指针和动画,让指针能正确的转动 。
代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
border-radius: 50%;
background-color: #000;
border: 15px solid #808080;
}
.spot {
width: 12px;
height: 12px;
position: absolute;
left: 194px;
/*calc(50%-6px)*/
top: 5px;
background-color: #fff;
border-radius: 6px;
transform-origin: center 195px;
transform: rotate(0deg);
}
.spot-container {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.hour {
width: 30px;
height: 100px;
background-color: #575757;
position: absolute;
left: calc(50% - 15px);
top: 100px;
transform-origin: center bottom;
transform: rotate(0deg);
transition: all 0.5s liner;
}
.hour::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px;
border-color: transparent transparent #575757 transparent;
position: absolute;
top: -30px;
}
.minute {
width: 18px;
height: 150px;
background-color: #fff;
position: absolute;
left: calc(50% - 9px);
top: 50px;
transform-origin: center bottom;
transform: rotate(0deg);
transition: all 0.5s liner;
}
.minute::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 9px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -18px;
}
.second {
width: 10px;
height: 180px;
background-color: #f00;
position: absolute;
left: calc(50% - 5px);
top: 20px;
transform-origin: center bottom;
transform: rotate(0deg);
transition: all 0.5s liner;
}
.second::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px;
border-color: transparent transparent #f00 transparent;
position: absolute;
top: -10px;
}
.cover {
width: 50px;
height: 50px;
background-color: #f00;
border-radius: 50%;
position: absolute;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
</style>
</head>
<body>
<div class="box">
<!-- html模板 -->
<!-- <div class="spot"></div> -->
<div class="spot-container"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="cover"></div>
</div>
<script>
let box = document.querySelector('.box')
let spotContainer = document.querySelector('.spot-container')
let hour = document.querySelector('.hour')
let minute = document.querySelector('.minute')
let second = document.querySelector('.second')
let deg = 0
function clock() {
for (let i = 0; i < 60; i++) {
let div = document.createElement('div')
div.className = 'spot'
spotContainer.appendChild(div)
deg += 6
div.style.transform = `rotate(${deg}deg)`
if ((i + 1) % 5 == 0) {
div.style.height = '24px'
}
}
}
// 设置时钟的变量,就是初始时间
let h = 2
let m = 48
let s = 10
// 指针旋转的圈数
let hRound = 0
let mRound = 0
let sRound = 0
// 设置指针的旋转角度
function pointer() {
hour.style.transform = `rotate(${hRound * 360 + h * 30}deg)`
minute.style.transform = `rotate(${mRound * 360 + m * 6}deg)`
second.style.transform = `rotate(${sRound * 360 + s * 6}deg)`
}
clock();
pointer();
setInterval(() => {
// 先执行指针旋转逻辑
s++
// 进行进位判断
if (s >= 60) {
m++
sRound++
s = 0
if (m >= 60) {
h++
mRound++
m = 0
if (h >= 12) {
h = 0
hRound++
}
}
}
// 设置指针的旋转角度
pointer()
}, 1000)
</script>
</body>
</html>
(3)时钟效果图:
5、微信小程序
1、小程序项目结构
项目下的文件和文件夹的作用如下:
components: 小程序的自定义组件
images: 图片文件夹
pages: 存放页面文件的文件夹
index: 页面文件夹
index.js: 页面的js代码
index.json: 页面的配置
index.wxml: html模板文件
index.wxss: 页面的样式文件
app.js: 微信小程序的程序入口(程序入口:开始执行代码的地方)
app.json: 小程序应用程序的全局配置文件
app.wxss: 小程序的全局样式(.wxss文件是小程序的样式文件)
envList.js: 小程序云环境列表
project.config.json: 小程序项目的配置
sitemap.json: 小程序路由配
2、微信小程序常用标签
<!-- page 标签相当于 html 中的 body -->
<page></page>
<!-- view 标签相当于 html 中的 div -->
<view></view>
<!-- text 相当于 html 中的 span -->
<text></text>
<!-- image 相当于 html 中的 img -->
<image></image>
<!-- block 是一个自身不会显示的标签 -->
<block></block>
3、微信小程序模板语法
(1)插值
作用:用于将变量值插入页面
语法:
```wxml
<!-- name 变量,定义在 js 文件的 data 中 -->
{{name}}
```
注意:插值运算的花括号中{{}},填写的内容其实是js表达式
(2)循环渲染
作用:可以将数组数据循环显示到页面中
语法:
```wxml
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key,wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id">
<!-- index: 是 wx:for 中隐式声明的变量,代表循环遍历array时的当前索引 -->
<!-- item: 是 wx:for 中隐式声明的变量,代表循环遍历array时的当前数组成员 -->
{{index}}: {{item}}
</view>
```
(3) 条件渲染
可以根据条件判断,选择性的渲染页面
语法:
```wxml
<view wx:for="{{table}}" wx:key="name">
<text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text>
<!-- wx:if 指令的值为布尔表达式,为true是渲染该节点,否则不渲染 -->
<text wx:if="{{item.sex==='male'}}">男</text>
<!-- wx:if 可以和 wx:elif、wx:else 连用 -->
<text wx:elif="{{item.sex==='female'}}">女</text>
<text wx:else>其他</text>
</view>
```
4、应用
运用所学的微信小程序相关知识点,练习制作了一个阅读器首页: