一、css动画之元素2D变换（transform属性）

(一)、平移

1、 translate(x,y)

2、translateX(x)

3、translateY(y)

4、translateZ(z)

(二)、旋转

1、rotate(deg)

2、rotateX

3、rotateY

4、rotateZ

(三)、缩放

1、scale(x)

2、scaleX

3、scaleY

4、scaleZ

(四)、倾斜

1、skew(30deg)

(五)、同时给transform赋值多个值

(六)、修改变换原点(transform-origin)

二、jQuery

(一)、eq和get

一、eq

二、get

(二)、创建并插入元素

一、append

二、appendTo

三、prepend

四、prependTo

五、before

六、after

七、insertBefore

（三）、特效动画

一、基本动画

二、自定义动画

（四）、绑定事件和遍历元素

一、绑定事件

二、遍历元素

（五）、设置样式、类、属性、标签体

一、设置样式

二、设置类

三、设置属性

四、设置标签体

三、canvas画布

（一）、基本用法

一、使用canvas步骤

二、绘制图形

3、绘制实体文本

4、绘制镂空文本

5、画线

6、画弧

7、绘图

（二）、像素级颜色操作

一、相应API

二、灰度图

三、黑白图

三、反转图

四、多媒体标签

（一）、audio和video标签

一、属性

二、video视频标签

三、audio音频播放器

（二）、swiper布局

一、安装

二、使用方法

三、初始化swiper

四、swiper事件

五、swiper模块

六、代码控制swiper

（三）、animate外部资源

一、下载方式

二、使用方法

三、自定义动画

五、微信小程序开发

一、js代码中的读值和赋值

二、阿里iconfont的使用

图库使用流程

在微信小程序中使用iconfont

三、页面底部选项卡

自定义底部选项卡图标

四、导航与页面间传参

使用 navigator 标签

使用 wx.navigateTo 函数

五、将数据保存到小程序的全局对象中

持久化数据

一、css动画之元素2D变换（transform属性）

属性值：

(一)、平移

1、 translate(x,y)

向右平移x像素向下平移y像素

2、translateX(x)

向右平移x像素

3、translateY(y)

向下平移y像素

4、translateZ(z)

像外平移z像素

(二)、旋转

1、rotate(deg)

绕中心点旋转

2、rotateX

绕X轴旋转

3、rotateY

绕Y轴旋转

4、rotateZ

绕Z轴旋转

(三)、缩放

1、scale(x)

x为缩放倍数

x为负数的时候代表反向

2、scaleX

X轴缩放

3、scaleY

Y轴缩放

4、scaleZ

Z轴缩放

(四)、倾斜

1、skew(30deg)

倾斜角度

(五)、同时给transform赋值多个值

transform:translateX(100px) rotate(45deg) scale(0.5);

(六)、修改变换原点(transform-origin)

待选值： top bottom left right center 还可以填入像素值

二、jQuery

(一)、eq和get

一、eq

eq读取对应索引位置的jQuery对象

let li = $lis.eq(1)

二、get

get读取对应索引位置的dom对象

let li = $lis.get(2)

(二)、创建并插入元素

一、append

某个元素追加一个子节点

$(document.body).append($box)

二、appendTo

追加一个子节点到另一个元素中

$box.appendTo($(document.body))

三、prepend

某个元素追加一个子节点到头部

$box.prepend($box)

四、prependTo

追加一个子节点到另一个元素的头部

$box.prependTo($(document.body))

五、before

某个元素的前面追加一个元素

$box2.before($box)

六、after

某个元素的后面添加一个元素

$box.after($box)

七、insertBefore

某个元素被添加到另一个元素的前面

$box.insertBefore($box2)

（三）、特效动画

一、基本动画

1、显示元素

$box.show()

2、隐藏元素

$box.hide()

3、开关元素

$box.toggle()

二、自定义动画

$box.animate({marginleft:300pxfontsize:64
},2000,"linear",()=>{//动画播放结束后的回调函数console.log("动画播放完毕")
})

1、渐入动画

$box.fadeIn(3000)

2、渐出动画

$box.fadeOut(3000)

3、开关渐变

$box.fadeToggle({duration:5000easing:"swing/linear"step:(a)=>{console.log("a")}
})

4、滑上动画

$box.slideUp()

5、滑下动画

$box.slideDown()

6、滑动开关

$box.slideToggle()

（四）、绑定事件和遍历元素

一、绑定事件

1、使用事件属性

$btn.click(()=>{})

2、使用事件监听器

$btn.addEventListener("click",()=>{})

二、遍历元素

$lis.each((index,item)=>{})

通过each函数来遍历

（五）、设置样式、类、属性、标签体

一、设置样式

1、读取样式

$box.css("width")

2、读取多个样式

$box.css(["width","height"."color"])

3、赋值样式

$box.css("width","300px")

二、设置类

1、添加类

$box.addClass("active")

2、判断是否存在某个类名

$box.hasClass("active")

3、删除类

$box.removeClass("active")

三、设置属性

1、读取属性

$box.attr("class")

2、赋值属性

$box.attr("class","active")

3、删除属性

$box.removeAttr("class")

四、设置标签体

1、text(相当于dom中的innerText)

$p.text('<span style="color: red">hello</span> world')

2、html(相当于dom中的innerHTML)

$p.html('<span style="color: red">hello</span> world')

三、canvas画布

（一）、基本用法

一、使用canvas步骤

创建canvas标签
给canvas标签设置 width height 属性
通过js 获取canvas标签
通过canvas标签获取context画布上下文（画布对象）
通过context绘制画布

二、绘制图形

1、绘制实心矩形

ctx.fillRect(x, y, w, h)

2、绘制镂空矩形

ctx.strokeRect(x,y,w,h)

备注：

x: 水平坐标

y: 竖直坐标

坐标原点在canvas左上角

w: 宽度

h: 高度

3、绘制实体文本

ctx.fillText(text,x,y)

4、绘制镂空文本

ctx.strokeText(text,x,y)

备注：

text：文本内容

x：水平坐标

y：竖直坐标

5、画线

画线分为两个步骤：

1、描点

2、画线

步骤一(画图)：

1、使用beginPath开启路径

ctx.beginPath()

2、移动笔头但不会记录路径

ctx.moveTo(100,100)

3、用线绘制到下一个点

ctx.lineTo(200,200)

4、将路径封闭(可选择不封闭)

ctx.closePath()

步骤二(显示)：

步骤一只是画线，但是还没有显示图形，

为了显示图形还需要调用以下函数

1、将路径所包围的图形用纯色来填充

ctx.fill()

2、将路径用镂空线条来进行绘制

ctx.stroke()

6、画弧

角度转弧度的公式: rad = (PI / 180) * deg

画弧公式：

ctx.arc(x, y, r, start, end)

x: 圆心横坐标

y: 圆心纵坐标

r: 圆半径

start: 起始弧度 0度时的方向为水平向右顺时针为正方向

end: 结束弧度

7、绘图

语法:

语法一： ctx.drawImage(image, dx, dy);

语法二：ctx.drawImage(image, dx, dy, dWidth, dHeight);

语法三：ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数解释：

image: img 标签的 dom 对象

dx dy: 图片在canvas中的坐标

dWidth dHeight: 图片在canvas中的宽高

sx, sy: 参考图片源，截图的坐标

sWidth, sHeight: 截图的宽高

（二）、像素级颜色操作

一、相应API

获取像素值的API: ctx.getImageData(sx,sy,sw,sh)

应用一个imageDate数据： ctx.putImageData(imageData,sx,sy)

参数解释：

sx、sy:截取/渲染canvas中的坐标值

sw、sh：截取图片的宽高

imageData：添加图像像素点的集合

注意：获取到的像素点数组，每四个代表一个像素点！！

二、灰度图

思路：计算出每个像素点的灰度值，然后给每个像素点的rgb赋值为灰度值

灰度公式：g = r0.299 + g0.587 + b*0.114

第一步：

计算出每个像素点的灰度值

g = r0.299 + g0.587 + b*0.114

第二步：

然后给rgb赋值为灰度值

imageData.data[i] = g

imageData.data[i + 1] = g

imageData.data[i + 2] = g

三、黑白图

思路：首先计算出每个像素点的灰度值，然后判断每个像素点的值更趋近于白色还是黑色，如果更趋金于黑色就给rgb赋值为0，如果更趋近白色，就给rgb赋值为255

步骤一：

获取当前像素点的灰度值，

步骤二：

判断当前像素点更接近黑色还是白色

let temp = 255/2

color = g>temp?255:0

步骤三：

赋值rgb为黑色或者白色

imageData.data[i] = color

imageData.data[i + 1] = color

imageData.data[i + 2] = color

三、反转图

思路：反转色就是求rgb值的补值

imageData.data[i] = 255 - imageData.data[i]

imageData.data[i + 1] = 255 - imageData.data[i + 1]

imageData.data[i + 2] = 255 - imageData.data[i + 2]

四、多媒体标签

（一）、audio和video标签

一、属性

属性：

width 标签宽度

height 标签高度

controls 控制面板

muted 静音

autoplay 自动播放

src 媒体源

preload 预载模式

loop 循环

poster 海报

二、video视频标签

基本用法：

<video height="300" src="./video/oceans.mp4" ></video>

使用自动播放+静音，能实现自动播放的效果

<video height="300" src="./video/oceans.mp4" controls autoplay muted></video>

三、audio音频播放器

由于audio和video都属于HTMLMediaElement实例，所以audio所有使用方法与video一样

参考地址：<audio> - HTML（超文本标记语言） | MDN

（二）、swiper布局

官网文档地址：Swiper API

一、安装

使用npm安装

从npm安装swiper

$ npm install swiper

二、使用方法

1、引入

引入下载资源包中的swiper-bundle.css和swiper-bundle.js

  <link rel="stylesheet" href="./引入swiper/swiper-bundle.css" /><script src="./引入swiper/swiper-bundle.js"></script>

2、添加swiper HTML布局

<!-- Slider main container -->
<div class="swiper"><!-- Additional required wrapper --><div class="swiper-wrapper"><!-- Slides --><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div>...</div><!-- If we need pagination --><div class="swiper-pagination"></div>
<!-- If we need navigation buttons --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
<!-- If we need scrollbar --><div class="swiper-scrollbar"></div>
</div>

3、swiper css样式/大小

.swiper {width: 600px;height: 300px;
}

三、初始化swiper

参考地址：Swiper API

1、在JS中初始化swiper

    const swiper = new Swiper('.swiper', {// 滚动方向direction: 'horizontal',// 循环loop: false,
// 特效effect: 'coverflow',
// allowSlideNext: false,
// 分页模块pagination: {el: '.swiper-pagination',},
// 导航模块navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},
// 滚动条模块scrollbar: {el: '.swiper-scrollbar',},});

四、swiper事件

参考地址：Swiper API

1、添加事件配置

 // 添加事件配置on: {// 当前激活索引发生变化事件activeIndexChange(swiper) {console.log('索引发生了变化');// swiper 实例对象console.log(swiper);// activeIndex 当前激活页的索引console.log(swiper.activeIndex);}}

2、使用on off绑定和解绑事件

  // on off 绑定和解绑事件// 滑块发生变化且动画播放完成事件swiper.on('slideChangeTransitionEnd', (swiper) => {console.log('滑块变化，动画播放完成');console.log(swiper.activeIndex);})
// 到达底部事件swiper.on('reachEnd', (swiper) => {console.log('已到达底部');console.log(swiper.activeIndex);})
// 解绑事件swiper.off('slideChangeTransitionEnd')

五、swiper模块

参考地址：Swiper API

六、代码控制swiper

参考地址：Swiper API

（三）、animate外部资源

官网参考文档：Animate.css | A cross-browser library of CSS animations.

一、下载方式

使用npm安装：

新建一个文件夹打开集成终端

npm install animate.css --save

二、使用方法

引入下载资源包中的animate.css或animate.min.css

动画必须添加animate_animated

<h1 class="animate__animated animate__bounceInDown">hello world</h1>

延迟

animate__delay-2s

播放速度

animate__slow 2s

animate__slower 3s

animate__fast 800ms

animate__faster 500ms

动画播放次数

animate__repeat-1 1

animate__repeat-2 2

animate__repeat-3 3

animate__infinite infinite

三、自定义动画

由于animate.css本质上是使用的 animation 样式播放的动画，所以可以手动强制修改 animation相关样式，来实现自定义

  h1 {/* 自定义动画样式 *//* animation-delay: 10s !important; */animation-timing-function: cubic-bezier(0, 1.34, 1, -0.4) !important;animation-duration: 10s !important;}

注意：需要加！important

五、微信小程序开发

一、js代码中的读值和赋值

Page({read() {console.log('read')// 函数中的 this 代表当前页面对象模型console.log(this)// 谁用this.data读取页面属性console.log(this.data.table)}
})

给页面属性赋值的方法：

Page({write() {// 使用this.setData函数进行赋值，参数是个json对象，需要修改哪个属性，就给该对象添加哪个属性this.setData({title: '天龙八部'})}
})

二、阿里iconfont的使用

图库使用流程

网址：iconfont-阿里巴巴矢量图标库

安装流程：

选择图标，加入自己的项目
下载自己项目
解压下载的zip文件
引入解压文件中的 iconfont.css 文件

使用方法：

使用 span 标签，给标签 class 加入 iconfont
在自己的项目中选择一个图标的 class
在 span 标签中加入所选 class 即可

注意：iconfont图标被当作字符使用，所以调节大小时，使用 font-size 属性

在微信小程序中使用iconfont

在 iconfont 网站的项目中点击 项目设置 设置字体类型为 Base64 然后下载项目
将 iconfont.css 改名为 iconfont.wxss
将 iconfont.wxss 放入小程序项目目录下
在小程序的 app.wxss 第一行代码加入 @import '...' (此处是iconfont.wxss文件路径)

安装好后其余使用方法和 html 中的方法一样

三、页面底部选项卡

配置项：全局配置 | 微信开放文档

在 app.json 中增加 tabBar 配置就能添加选项卡

{"tabBar": {"selectedColor": "#444", // 选中的按钮的文本颜色"list": [ // 按钮列表{"pagePath": "pages/read/read", // 跳转的页面路径"text": "领读", // 按钮的文字描述"iconPath": "image/tab_icon1.png", // 未选中时的图标路径"selectedIconPath": "image/tab_icon1_active.png" // 选中时的图标路径}]},
}

注意：要显示选项卡，按钮列表中，必须要有一个配置的 pagePath 属性值，是小程序的入口页面

注意：底部选项卡指定的页面不能是分包里的页面

自定义底部选项卡图标

可以在阿里适量图库下载需要的图标（一般来说是一个镂空图标和一个填充图标）

将下载后的图片复制到小程序项目目录下，然后再tabBar配置选项中配置即可

四、导航与页面间传参

导航：引导页面跳转到指定位置

导航方法有两种：1. 页面标签进行导航，类似 html 中的 a 标签；2. 使用js进行导航，类似于 location.href

使用 navigator 标签

文档：navigator | 微信开放文档

语法：

<!-- url：要跳转到的页面路径 -->
<!-- 若要传递参数，可以在url后面增加 ?key=value 的参数 -->
<navigator url="path"></navigator>

使用 wx.navigateTo 函数

文档：wx.navigateTo(Object object) | 微信开放文档

语法：

function(){wx.navigateTo({// path: 要跳转的路径// key=value: 要传递的参数url: 'path?key=value'})
}

// wx.navigateTo 跳转到某页 会新增堆栈
// wx.redirectTo 重定向到某页 不会新增堆栈
// wx.navigateBack 返回

参数的获取可以在另一个页面的 onLoad 声明周期函数中 options 变量中存放着参数

五、将数据保存到小程序的全局对象中

// 获取小程序实例对象
const app = getApp()

app.globalData.x = 1 // 给小程序的全局对象赋值

// 只要不关闭小程序就能通过小程序全局对象保存参数

持久化数据

什么叫持久化？持久化就是长期存储数据到磁盘中，关闭应用程序后，存储的数据还在

异步是什么？异步就是程序执行的时候不会等待或卡顿

同步是什么？同步的程序在调用的时候会等待或卡顿

异步存储 wx.setStorage(Object object) | 微信开放文档 wx.setStorage(Object object)

wx.getStorage(Object object) | 微信开放文档 wx.getStorage(Object object)

异步删除 wx.removeStorage(Object object) | 微信开放文档 wx.removeStorage(Object object)

下面的是上述方法的同步版本

any wx.getStorageSync(string key) | 微信开放文档

wx.setStorageSync(string key, any data) | 微信开放文档

wx.removeStorageSync(string key) | 微信开放文档

移动互联应用阶段学习总结相关推荐

移动互联应用阶段学习
1.css动画动画原理及2D变换,过渡动画,3d变换和animation动画,渐变色和响应式布局本节主要是涉及的动画特效,都是我们做页面时经常会用到的知识,能够让整个页面看着不会很单调,丰富了整体 ...
2018年计算机职称考试冲刺,2018年中级会计职称考试冲刺阶段学习计划
2018年中级会计师考试冲刺阶段复习时间段是8月12日至9月8日.经过前面一段时间的复习,相信考生已经对全书的内容有了一定的了解和掌握.在此小编为大家总结了2018年中级会计职称考试冲刺阶段学习计划, ...
Python第一阶段学习总结
[第7天]Python第一阶段学习总结 2021/09/23 一. 元组元组的定义元组是容器型数据(序列),将()作为容器的标志里面多个元素用逗号隔开:(元素1, 元素2,-) 元组不可变(不支持 ...
OpenCV作业及近阶段学习总结
OpenCV作业及近阶段学习总结作业描述不太理解为啥不让用OpenCV的API,明明可以直接可以一行代码搞定..... numpy代码如下: 均值滤波 import cv2 import nump ...
Java web阶段学习总结(华清远见)
标题Java web阶段学习总结经过web前端的学习之后,我们开启了Java web后端的学习. 学习一样新的东西首先要了解它的原理,以及所要具备的一些条件.对于Servlet 的开发步骤一般有:新 ...
自学大数据者请进：大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面自学大数据者请进:大数据学习线路及各阶段学习书籍.视频推荐 (1 ...
连载一：无限互联——我的学习生活
连载一: 无限互联--我的学习生活 hello!every body.welcome to my e-home. 在这里,我很高兴向大家介绍我最近的学习工作状态. 哈哈!很期待吧. 我最近并没有像 ...
大数据学习线路及各阶段学习书籍推荐
大数据学习路线及各阶段学习书籍推荐!废话不多说,直接切入主题,有需要的小伙伴可以参考学习! 阶段一.大数据基础--java语言基础方面 (1)Java语言基础 Java开发介绍.熟悉Eclipse开发 ...
谈谈我的高中阶段学习情况以及大学现状，还有对未来的规划和憧憬
谈谈我的高中阶段学习情况以及大学现状,还有对未来的规划和憧憬作者:Luosd 时间:2017年春节光阴似箭,日月如梭,正是经历了这些年的光阴,才真正懂得了这句话是多么的正确,回首过去,仿佛 ...