华清远见重庆中心——移动互联应用学习总结
目录
一、css动画
1.动画原理:
2.css代码中如何理解动画:
3. transform
3.1 translate 平移
3.2 rotate: 旋转元素
3.3 scale 缩放
3.4 skew 倾斜
3.5 设置多个变换属性
4.transition
4.1 使用方法
4.2 transition 盒子下落
5. transform 和transition使用
二、jquery
1.jquery的作用:
2.基础用法
3.eq() ,index() , get() , find() ,closest() 方法的使用
4.创建元素和插入元素
三,canvas画布
1.canvas基础使用
2.示例
四.微信小程序
1.微信小程序基础
1.1常用标签:
1.2 单位rem和rpx
2.微信api
2.1Page参数
2.2 wx.xxx
3.模板语法
3.1条件渲染
3.2 循环渲染
4.事件
4.1 事件的使用
4.2 事件绑定语法
5.生命周期
5.1 APP生命周期
5.2 page的生命周期
总结
一、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是过渡的意思,将会时元素从一个状态用动画形式过渡到零一个状态 *//* 参考: *//* 使用过渡属性 */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 = 11let minute = 30let second = 50// 指针套圈的圈数let hRound = 0let mRound = 0let 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 = 0sRound++minute++if (minute >= 60) {minute = 0mRound++hour++if (hour >= 12) {hour = 0hRound++}}}// 渲染时钟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>// 查询canvasconst 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.innerWidthcanvas.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 {// 坐标xy// 半径r// 速度 单位: px/sv// 是否活着life = trueconstructor() {// 随机雪球的属性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.rthis.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) returnthis.y += this.v * deltaTime// 判断雪球是否超出屏幕if (this.y >= canvas.height + this.r) {// 设置雪球让他死掉this.life = false}}}let lastTime = 0let deltaTime// 当前时间,用于计时let currentTime = 0// 雪球数组let balls = []// 生成小球的时间间隔let spawnTime = config.getSpawnTime()// 动画循环requestAnimationFrame(render)// 动画主循环function render(time) {// 计算时间deltaTime = (time - lastTime) * 0.001lastTime = 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以及微信小程序的基础用法和一些例子。
华清远见重庆中心——移动互联应用学习总结
目录
一、css动画
1.动画原理:
2.css代码中如何理解动画:
3. transform
3.1 translate 平移
3.2 rotate: 旋转元素
3.3 scale 缩放
3.4 skew 倾斜
3.5 设置多个变换属性
4.transition
4.1 使用方法
4.2 transition 盒子下落
5. transform 和transition使用
二、jquery
1.jquery的作用:
2.基础用法
3.eq() ,index() , get() , find() ,closest() 方法的使用
4.创建元素和插入元素
三,canvas画布
1.canvas基础使用
2.示例
四.微信小程序
1.微信小程序基础
1.1常用标签:
1.2 单位rem和rpx
2.微信api
2.1Page参数
2.2 wx.xxx
3.模板语法
3.1条件渲染
3.2 循环渲染
4.事件
4.1 事件的使用
4.2 事件绑定语法
5.生命周期
5.1 APP生命周期
5.2 page的生命周期
总结
一、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是过渡的意思,将会时元素从一个状态用动画形式过渡到零一个状态 *//* 参考: *//* 使用过渡属性 */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 = 11let minute = 30let second = 50// 指针套圈的圈数let hRound = 0let mRound = 0let 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 = 0sRound++minute++if (minute >= 60) {minute = 0mRound++hour++if (hour >= 12) {hour = 0hRound++}}}// 渲染时钟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>// 查询canvasconst 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.innerWidthcanvas.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 {// 坐标xy// 半径r// 速度 单位: px/sv// 是否活着life = trueconstructor() {// 随机雪球的属性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.rthis.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) returnthis.y += this.v * deltaTime// 判断雪球是否超出屏幕if (this.y >= canvas.height + this.r) {// 设置雪球让他死掉this.life = false}}}let lastTime = 0let deltaTime// 当前时间,用于计时let currentTime = 0// 雪球数组let balls = []// 生成小球的时间间隔let spawnTime = config.getSpawnTime()// 动画循环requestAnimationFrame(render)// 动画主循环function render(time) {// 计算时间deltaTime = (time - lastTime) * 0.001lastTime = 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以及微信小程序的基础用法和一些例子。