目录
3.eq() ,index() , get() , find() ,closest() 方法的使用
一、css动画
1.动画原理：
连续的播放多张图片，形成一个连贯的动画
2.css代码中如何理解动画：
一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画
3. transform
3.1 translate 平移
第一个参数: x轴的平移量，正方向向右
第二个参数: y轴的平移量，正方向向下
transform: translate(100px, 200px);
transform: translateY(300px);
transform: translateZ(300px);3.2 rotate: 旋转元素
参数代表旋转的角度，角度的单位是 deg、代表弧度的单位是 rad
transform: rotate(180deg);
/* 左右镜像 以Y为中心旋转 */
transform: rotateY(180deg);
* 上下镜像 */
transform: rotateX(180deg);3.3 scale 缩放
参数代表的是缩放比例，值为1 则为原始大小
transform: scale(1, 0.5);
/* 参数只写一个，代表的是水平和竖直方向缩放相同的比例 */
/* 在原来的基础上都放大3 */
transform: scale(3);
/* 负数代表的就是在指定轴上的镜像 */
transform: scale(-0.5, 1);
/* 在X的方向上 变胖*/
transform: scaleX(2);
/* 变高 */
transform: scaleY(2);
transform: scaleZ(2);
/* 隐藏元素 */
transform: scale(0);3.4 skew 倾斜
第一个参数: 水平轴的倾斜度数， 第二个参数: 竖直轴的倾斜度数
transform: skew(0, 30deg);
/* 只设置一个参数 则只有水平轴倾斜有效 */
transform: skew(30deg);
/* 水平轴的倾斜度数 */
transform: skewX(30deg);
transform: skewY(30deg);
3.5 设置多个变换属性
同时设置多个变换属性，用空格隔开
transform: rotate(180deg) translateX(100px) scale(0.5);
/* transform 的实现原理类似于矩阵，先旋转后平移和先平移后旋转结果是不同的 */
transform: translateX(100px) rotate(180deg) scale(0.5);
/* 设置transform的原点 变换原点还会影响缩放的位置*/
/* 值的带选项：center, top, bottom, left, right, 还可以写具体的长度值 */
transform-origin: right bottom;
/* 原点若x值和y值都为0，代表的是元素左上角的位置 */
/* 第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动 */
/* 第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动 */
transform-origin: 50px 100px;4.transition
是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态
/* all: 代表所有属性、none: 没有任何属性 */
/* 带选项：
linear: 匀速播放动画
ease-in: 慢进匀速出
ease-out: 匀速进慢出
ease-in-out: 慢进慢出
steps(n): 声明有n个过渡阶段
*/
/* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */
transition: all 3s linear 2s;4.1 使用方法
<!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: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 1;
transform: translateX(0px);
/* 什么是transition？ */
/* transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态 */
/* 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition */
/* 使用过渡属性 */
transition: all 2s linear;
/* transition复合属性可以拆解成以下属性 */
/* 过渡属性：声明一个需要产生过渡动画的属性 */
/* 可以同时声明多个属性，属性之间用逗号隔开 */
/* 待选项：
all: 代表所有属性
none: 没有任何属性
*/
transition-property: opacity, transform;
transition-property: all;
/* 补间动画的时长 */
transition-duration: 1s;
transition-duration: 1000ms;
/* 补间动画的速度曲线 */
/* 带选项：
linear: 匀速播放动画
ease-in: 慢进匀速出
ease-out: 匀速进慢出
ease-in-out: 慢进慢出
steps(n): 声明有n个过渡阶段
*/
transition-timing-function: linear;
/* 除了使用预制带选项，也可以手动赋值如下： */
transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);
/* steps 函数 */
transition-timing-function: steps(5);
/* 延迟播放动画的时间 */
transition-delay: 1s;
/* 使用transition属性设置所有的过渡动画属性 */
/* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */
transition: all 3s ease-in-out 2s;
}
.box:hover {
/* opacity: 0; */
transform: translateX(200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>4.2 transition 盒子下落
点击页面，让盒子依序下落
4.2.1 代码
<!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-container {
display: flex;
}
.box {
width: 30px;
height: 30px;
/* 初始值 */
transition: all 2s linear;
background-color: pink;
transform: translateY(0px) rotate(0deg) scale(1);
}
.box-container.active>.box {
transform: translateY(200px) rotate(720deg) scale(0.5);
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box"></div>
</div>
</body>
<script>
let boxContainer = document.querySelector('.box-container')
boxContainer.addEventListener('mouseenter', () => {
if (!boxContainer.classList.contains('active')) {
boxContainer.classList.add('active')
}
})
boxContainer.addEventListener('mouseleave', () => {
if (boxContainer.classList.contains('active')) {
boxContainer.classList.remove('active')
}
})
// 初始 box 盒子
let html = ''
for (let i = 0; i < 20; i++) {
html += `<div class="box" style="transition-delay: ${i * 0.5}s"></div>`
}
boxContainer.innerHTML = html
</script>
</html>4.2.2 效果图
5. transform 和transition使用
使用transform和transition原理制作一个时钟的表盘，分别给钟表添加指针，并让指针转动，具体实现代码如下
<!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>
.clock {
width: 400px;
height: 400px;
background-color: #000;
border-radius: 50%;
border: 20px solid #808080;
position: relative;
}
.bg {
width: 100%;
height: 100%;
position: relative;
}
.point {
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #fff;
left: calc(50% - 5px);
top: 10px;
transform-origin: center 190px;
transform: rotate(0deg);
}
.hour {
position: absolute;
width: 20px;
height: 30px;
background-color: #00f;
top: 170px;
left: calc(50% - 10px);
transform-origin: center bottom;
transform: rotate(0deg);
/* transition: all 1s linear; */
}
.hour::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 70px 10px;
border-color: transparent transparent #00f transparent;
position: absolute;
top: -140px;
}
.minute {
position: absolute;
width: 12px;
height: 70px;
background-color: #0f0;
top: 130px;
left: calc(50% - 6px);
transform-origin: center bottom;
transform: rotate(0deg);
transition: all 1s linear;
}
.minute::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 70px 6px;
border-color: transparent transparent #0f0 transparent;
position: absolute;
top: -140px;
}
.second {
position: absolute;
width: 8px;
height: 150px;
background-color: #f00;
top: 90px;
left: calc(50% - 4px);
transform-origin: center 110px;
transform: rotate(0deg);
transition: all 1s linear;
}
.second::before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 70px 4px;
border-color: transparent transparent #f00 transparent;
position: absolute;
top: -140px;
}
.cover {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #f00;
position: absolute;
left: calc(50% - 16px);
top: calc(50% - 16px);
}
</style>
</head>
<body>
<div class="clock">
<div class="bg">
<div class="point"></div>
</div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="cover"></div>
</div>
</body>
<script>
// 查询元素
const bg = document.querySelector('.bg')
const hEl = document.querySelector('.hour')
const mEl = document.querySelector('.minute')
const sEl = document.querySelector('.second')
// 画点
function drawPoint() {
let html = ''
for (let i = 0; i < 60; i++) {
// 高度样式
let height = i % 5 === 0 ? 'height: 20px;' : ''
html += `<div class="point" style="transform: rotate(${i * 6}deg); ${height}"></div>`
}
bg.innerHTML = html
}
drawPoint()
// 时间
let hour = 11
let minute = 30
let second = 50
// 指针套圈的圈数
let hRound = 0
let mRound = 0
let sRound = 0
// 渲染当前时刻
function render() {
// 计算每根针的旋转角度
hEl.style.transform = `rotate(${30 * hour + 30 * (minute / 60) + 360 * hRound}deg)`
mEl.style.transform = `rotate(${6 * minute + 360 * mRound}deg)`
sEl.style.transform = `rotate(${6 * second + 360 * sRound}deg)`
}
render()
setInterval(() => {
// 计算时钟逻辑
second++
if (second >= 60) {
second = 0
sRound++
minute++
if (minute >= 60) {
minute = 0
mRound++
hour++
if (hour >= 12) {
hour = 0
hRound++
}
}
}
// 渲染时钟
render()
}, 1000)
</script>
</html>效果图：
二、jquery
1.jquery的作用：
jquery有以下主要功能：针对页面元素，jquery提供了很多操纵页面元素的函数，还有一些工具函数，方便一些运算，jquery可以充当发起网络请求的客户端工具。
2.基础用法
// 1. 查询并存储元素
// 2. 操作元素，包括修改元素样式，绑定事件等
let box = document.querySelector('.box')
// 查询并构造一个jquery对象
let $box = $('.box')
console.log($box);
// 修改样式
$box.css('background-color', '#f00')3.eq() ,index() , get() , find() ,closest() 方法的使用
Eq(): 返回一个对应索引的jquery对象 $(‘li’).eq(0) 查询第一个li标签所代表的jquery对象
Index(): 返回一个jquery对象在另一个jQuery对象中的索引 $(‘li’).index( $(‘li:nth-child(2)’) )
Get(): 等价于用索引取值，获取一个指定索引位置的dom对象 $(‘li’).get(0) 等价于 $(‘li’)[0] 代表的是索引为0的dom对象
Find(): 查找一个jquery对象中的子元素的jquery对象 $(‘ul’).find(‘li’)
Closest(): 查询最近的父元素 $(‘li’).closest(‘ol’)
代码如下：
// 查询一个jquery对象
let $boxs = $('.box')
console.log($boxs);
// eq() 该函数将返回对应索引位置的jquery对象
let $box = $boxs.eq(0)
console.log($box);
// 用索引获取到的是dom对象
let box = $boxs[0]
console.log(box);
// jquery对象类似一个数组，可以获取上述jquery对象的dom对象，如下：
// 也可以通过函数get来获取，
box = $boxs.get(0) // 与 $boxs[0]等价
console.log(box);
// index() 查询某个节点在集合中的索引
console.log($boxs.index($box2));
// find() 查询某个节点的后代节点
let boxList = document.querySelector('.box-list')
let box3 = boxList.querySelector('.box:nth-child(3)')
console.log(box3);
console.log($('.box-list').find('.box:nth-child(3)'));
// closest 查询最近的父节点
console.log($box2.closest('.box-list'));4.创建元素和插入元素
jquery中通过append、prepend、after、before添加元素，具体用法如下列代码所示：
let $box = $(`<div class="box box-yellow"></div>`)
console.log($box);
// 查找被插入的元素对象
let $body = $(document.body)
let $box2 = $('.box:nth-child(2)')
console.log($box2);
// append
// prepend
// 在元素内追加另一个元素
$body.append($box)
$body.prepend($box)
// appendTo
// prependTo
// 将一个元素插入到另一个元素的子节点中
$box.appendTo($body)
$box.prependTo($body)
// after
// before
// 一个元素的后面或前面添加另一个元素
$box2.after($box)
$box2.before($box)
// insertAfter
// insertBefore
// 一个元素被插入到另一个元素的前或后面
$box.insertAfter($box2)
$box.insertBefore($box2)三，canvas画布
canvas是浏览器提供的一个标签，该标签可以用来绘制图像。canvas我们通常称为画布
1.canvas基础使用
在body中添加canvas标签，在js中查询canvas，获取获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)
注意：canvas 通过 width 和 height 来条件画布的宽高 ，不要使用样式设置画布宽高，通过样式修改后的宽高，不是真实的像素比例
<body>
<canvas width="800" height="600"></canvas>
</body>
// 查询canvas
const canvas = document.querySelector('canvas')
// 获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)
const ctx = canvas.getContext('2d')
2.示例
canvas实现降雪动画练习：练习中通过canvas.width = window.innerWidth设置画布的宽度，高度也是通过类似的方法设置，使用Math.round（）函数控制雪球的大小，下落速度等。用到了动画函数requestAnimationFrame() ，会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
具体实现代码如下：
<!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>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// 配置对象
// 用于方便的调整参数
let config = {
// 半径的最小和最大值
r: {
min: 5,
max: 10
},
// 速度的最大值和最小值
v: {
min: 50,
max: 200
},
// 生成小球的时间间隔
spawnTime: {
min: 0.1,
max: 1
},
// 读取一个随机生成小球的间隔时间
getSpawnTime() {
return this.spawnTime.min + Math.random() * (this.spawnTime.max - this.spawnTime.min)
}
}
// 雪球
class SnowBall {
// 坐标
x
y
// 半径
r
// 速度 单位: px/s
v
// 是否活着
life = true
constructor() {
// 随机雪球的属性
this.r = Math.round(config.r.min + Math.random() * (config.r.max - config.r.min))
this.x = Math.round(-this.r + Math.random() * (window.innerWidth + this.r - (-this.r)))
this.y = -this.r
this.v = Math.round(config.v.min + Math.random() * (config.v.max - config.v.min))
}
// 渲染
// 渲染自己到canvas上
render() {
if (!this.life) return
// 设置颜色
ctx.fillStyle = '#fff'
// 设置路径
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
// 填色
ctx.fill()
}
// 每帧更新对象的逻辑写在update方法中
update(deltaTime) {
if (!this.life) return
this.y += this.v * deltaTime
// 判断雪球是否超出屏幕
if (this.y >= canvas.height + this.r) {
// 设置雪球让他死掉
this.life = false
}
}
}
let lastTime = 0
let deltaTime
// 当前时间，用于计时
let currentTime = 0
// 雪球数组
let balls = []
// 生成小球的时间间隔
let spawnTime = config.getSpawnTime()
// 动画循环
requestAnimationFrame(render)
// 动画主循环
function render(time) {
// 计算时间
deltaTime = (time - lastTime) * 0.001
lastTime = time
// 计时
currentTime += deltaTime
// 当前时间大于等于创建雪球的间隔时间
if (currentTime >= spawnTime) {
// 时间递减
currentTime -= spawnTime
// 创建雪球
balls.push(new SnowBall())
// 重新随机一个生成雪球的间隔时间
spawnTime = config.getSpawnTime()
}
// 执行动画逻辑
balls.forEach(sb => {
sb.update(deltaTime)
})
// 清洗死掉的雪球
balls = balls.filter(sb => sb.life)
// 清空画布
// 修改颜色
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
balls.forEach(sb => {
sb.render()
})
requestAnimationFrame(render)
}
</script>
</html>效果图：
四.微信小程序
微信小程序是一个基于微信app为开发和运行环境的一个小性软件。
1.微信小程序基础
1.1常用标签：
<!-- page 标签相当于 html 中的 body -->
<page></page>
<!-- view 标签相当于 html 中的 div -->
<view></view>
<!-- text 相当于 html 中的 span -->
<text></text>
<!-- image 相当于 html 中的 img -->
<image></image>
<!-- block 是一个自身不会显示的标签 -->
<block></block>1.2 单位rem和rpx
rem：rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小
rpx: rpx 是 微信wxml中的长度单位，rpx 真实大小的计算是参考的 750px 的屏幕宽度进行的,1rpx 的物理大小 = 750px 宽度屏幕上 1px 的大小.
若希望某个元素再不同的机型下能够等比例缩放，则请使用 rpx 作为单位，rpx和px的换算公式如下：
px的尺寸 = rpx下的尺寸 * (当前机型的屏幕宽 / 750)
rpx的尺寸 = px的尺寸 / (当前机型的屏幕宽 / 750)
2.微信api
2.1Page参数
data 数据存储
onload() 当页面加载中
onPullDownRefresh 下拉刷新回调函数
onReachBottom 触底回调函数
2.2 wx.xxx
wx.stopPullDownRefresh(); 停止下拉刷新
wx.showToast({}) 消息提示框
wx.showLoad() 显示消息加载框
wx.showModal() 显示对话框
...
3.模板语法
3.1条件渲染
可以根据条件判断，选择性的渲染页面
<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>3.2 循环渲染
可以将数组数据循环显示到页面中
<!-- 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>4.事件
4.1 事件的使用
bind：普通的绑定事件，并且事件可以冒泡
catch：绑定事件，但不会冒泡
capture-bind：捕获事件并可以冒泡
capture-catch：捕获事件并不冒泡
4.2 事件绑定语法
<!-- key: bind catch capture-bind capture-catch 中的任意一个 -->
<!-- eventName: 事件名称 -->
<!-- eventHandler: 事件处理程序，值是一个字符串，代表对应js文件的方法名 -->
<button key:eventName="eventHandler">btn</button>
<!-- 例如绑定点击事件 -->
<button bind:tap="btnClick">click</button>
<!-- bind 和 catch 后面的冒号可以省略 -->
<button catchtap="btnClick">click</button>5.生命周期
5.1 APP生命周期
onLaunch()：小程序初始化完成时触发，全局只触发一次。参数也可以使用wx.getLaunchOptionsSync 获取。一般在这个生命周期函数中执行 全局数据 的初始化操作。
onShow()：小程序启动，或从后台进入前台显示时触发，可以触发多次。
也可以使用 wx.onAppShow 绑定监听。
onHide()：小程序从前台进入后台时触发，可以触发多次。也可以使用 wx.onAppHide 绑定监听。
5.2 page的生命周期
打开页面的加载顺序：onLoad，onShow，onReady切换页面时只会加载onShow，onHide
onLoad(options)：页面加载时触发。只触发一次，可以在 options中获取到界面跳转的参数。
onShow()：页面显示时触发，可触发多次。
onReady()：页面初次渲染完成时触发。只触发一次
onHide()：页面隐藏时触发。 如wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等，可触发多次。
onUnload()：页面卸载时触发。如wx.navigateBack 到其他页面时。 一般在这个生命周期函数中执行清除定时器、closeSocket等操作。
总结
以上就是今天的总结内容，简单介绍了css动画、jquery、canvas以及微信小程序的基础用法和一些例子。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
