移动互联学习基础

目录

1.transition动画

2.元素2D变化transform

3.jquery

4.canvas画布

5.微信小程序

---

1.transition动画

  播放过度动画至少包含 transition-property transition-duration 

   1） transition-property 还有两个待选项

                none

                all: 所有属性都能播放过渡动画

    2）动画播放的时长 

            transition-duration: 5s;

transition-duration: 5s;

    3） 动画播放的速度曲线 

              linear: 匀速直线运动

                ease-in: 慢进

                ease-out: 慢出

                ease-in-out: 慢进慢出

                cubic-bezier: 曲线函数

 transition-timing-function：linear；

    4）动画播放延迟 

            transition-delay: 3s;

transition-delay:3s；

     5）合成属性

                语法:

                transition: property duration timing-function delay;

 transition: property duration timing-function delay;

2.元素2D变化transform

1.平移
transform变换，用于描述物体的位置旋转缩放
translate平移，第一个参数：水平平移量(x轴)；第二个参数：竖直平移量(y轴)
右为正方向：左移正数，右移负数
transform:translate(100px,200px)
translateX/Y/Z();独立的在某一个轴上平移，单参数

2.旋转
transform:rotate()
rotate()旋转
单位：deg角度，rad弧度
参数：可以是角度值，也可以是弧度值
转换：弧度制的PI=180°
旋转的正方向（顺时针）就是数值的正方向（正值），0度代表竖直向上；负数的含义就是360度-对应的度数，如(-30deg)=(360-30deg)=(30deg)；默认旋转函数rotate是沿着z轴（即垂直屏幕的线）进行旋转的。
rotateX()沿着水平轴进行旋转，对称轴为横向，类似滚筒旋转
rotateY()与X轴相反

3.缩放
scale()缩放
scale(水平方向，竖直方向)缩放，可以单参数也可以双参数
transform:scale(1) //1倍大小（即原来的大小）
transform:scale(-1) //反向
参数：比率；1为原本大小
写负数代表反向
scaleX()水平方向的缩放（变瘦）
scaleY()竖直方向的缩放（变高变大）

4.倾斜
transform:skew();
skew()倾斜，参数为角度值
skew(水平方向，竖直方向)缩放，可以单参数也可以双参数
 

3.jquery

 jquery 使用的方法：

1） 查询并存储元素

 2） 操作元素，包括修改元素样式，绑定事件等

  使用 $() 函数获取一个 jQuery 对象， jquery 对象的变量名 一般以 $ 美元符开头

    let $box = $('.box')

   jquery 对象看上去像一个数组 其中数组成员就是 dom 对象

   给元素添加样式

   $box.css('height', '100px')

 jquery对象的函数总返回自己 所以可以进行链式调用

 3）查询元素

 const $box = $('.box')

  读取元素位置  position 查询元素相对于父元素的位置 不能赋值只能读值

    console.log($box.position());

    offset 查询元素全局坐标

    console.log($box.offset()); 

    offset 可以赋值

    $box.offset({ top: 200, left: 100 })

    所有查询元素大小的函数均可赋值

    查询元素的内容宽高

    console.log($box.width(300));

    console.log($box.height());

    innerWidth 代表 width + padding

    console.log($box.innerWidth());

     outerWidth 代表 width + padding + border

    console.log($box.outerWidth());

4.canvas画布

1）基本使用方法

 const canvas = document.querySelector('canvas')

    // 获取canvas标签的画布对象

    // 可以通过操作画布对象来进行绘画

    const ctx = canvas.getContext('2d')

    // 绘制一个实心矩形

    ctx.fillRect(100, 50, 100, 100)

      总结:

     使用canvas的步骤

    // 1. 创建canvas标签

    // 2. 给canvas标签设置 width height 属性

    // 3. 通过js 获取canvas标签

    // 4. 通过canvas标签获取context画布上下文（画布对象）

    // 5. 通过context绘制画布

 2）画线

   设置颜色和线宽

    ctx.strokeStyle = '#ff0'

    ctx.lineWidth = 15

     画线分两个步骤:

     1. 描点（设置路径）

     2. 画线（将所描的点连接起来）

   步骤一

   使用 beginPath 开启路径

    ctx.beginPath()

    // 移动笔头但不会记录路径上的线条

    ctx.moveTo(400, 100)

    // 用线绘制到下一个点

    ctx.lineTo(200, 200)

    ctx.lineTo(600, 200)

    ctx.lineTo(400, 100)

  // 将路径封闭

    ctx.closePath()

 // 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用

  步骤二

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

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

    // ctx.fill()

    // 将路径用镂空线条进行绘制

    ctx.stroke()

   ctx.strokeStyle = '#f00'

   ctx.beginPath()

   ctx.moveTo(400, 400)

    ctx.lineTo(500, 400)

5.微信小程序

1）常用标签

<!-- page 标签相当于 html 中的 body -->

<page></page>

<!-- view 标签相当于 html 中的 div -->

<view></view>

<!-- text 相当于 html 中的 span -->

<text></text>

<!-- image 相当于 html 中的 img -->

<image></image>

<!-- block 是一个自身不会显示的标签 -->

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

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

## 使用 navigator 标签

文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

语法：

html

<!-- url：要跳转到的页面路径 -->

<!-- 若要传递参数，可以在url后面增加 ?key=value 的参数 -->

<navigator url="path"></navigator>

## 使用 wx.navigateTo 函数

文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

语法：

js

function(){

    wx.navigateTo({

        // path: 要跳转的路径

        // key=value: 要传递的参数

        url: 'path?key=value'

    })

}

// wx.navigateTo 跳转到某页 会新增堆栈

// wx.redirectTo 重定向到某页 不会新增堆栈

// wx.navigateBack 返回

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

 "tabBar": {
        "selectedColor": "#000",
        "list": [
            {
                "bak": "pages/lead-read/lead-read",
                "pagePath": "pages/lead-read/lead-read",
                "text": "领读",
                "iconPath": "image/tab_icon1.png",
                "selectedIconPath": "image/tab_icon1_active.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "image/tab_icon2.png",
                "selectedIconPath": "image/tab_icon2_active.png"
            },
            {
                "pagePath": "pages/desk/desk",
                "text": "书桌",
                "iconPath": "image/tab_icon3.png",
                "selectedIconPath": "image/tab_icon3_active.png"
            },
            {
                "pagePath": "pages/ucenter/ucenter",
                "text": "个人中心",
                "iconPath": "image/tab_icon4.png",
                "selectedIconPath": "image/tab_icon4_active.png"
            }
        ]
    }