在进行小程序项目启动，进行技术选型的时候，对市场上多个小程序框架进行了考虑:
团队成员mpvue、wepy、uni-app都有实际的项目经验,且根据Github上的star数还有issue,最后决定回到到使用原生开发。
虽然框架有些很成熟，有工程化和跨端的解决方案，也有实际的上线项目，但考虑到后续一些支撑性的问题(维护，文档，坑等)，在github上看了issue，有些已经没在维护了。
想着让项目持续迭代，不受第三方框架限制，保持稳健，最后决定使用原生，跟着官方的迭代升级，自己维护，引入前端工程化的思想，提高繁琐的流程以及开发效率。
图片资源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改动，容易有冲突，将scss文件传到服务器就好了).prettierrc.js(代码格式化风格配置)babel.config.jsjest.config.js(单元测试配置文件)webpack.compress.js(指定入口图片资源文件，将图片压缩编译到小程序的资源目录)webpack.config.js->(工程化入口文件,指定入口scss文件，监听文件变化，自动将scss编译为wxss)
.安装依赖npminstall或yarninstall.编译scss
npmrundev.压缩图片npmrunimg.单元测试npmruntest(生成测试报告)npmruntest:watch(监听测试文件改动—开发环境下使用)
执行npmrunimg将图片压缩到app/assets/img目录下,一张7k的图片变成5k，肉眼看不出有什么差别。
执行npmruncreate终端会提示选择页面还是组件,选择页面,按Enter键，输入页面的名称，会自动将4个文件创建到app/pages/xxx下。
执行npmruncreate终端会提示选择页面还是组件,选择组件,按Enter键，输入组件的名称，会自动将4个文件创建到app/components/xxx下。
工程化的初衷就是为了减少重复性的操作，提高编码的效率和乐趣。
JavaScript是弱类型语言，好处是灵活，坏处是太灵活(多人协作，维护别人写的代码就是很痛苦了)。
项目最主要的是稳健，可高度自定义拓展，不拘束于版本和地上那方，特别多人协作的团队，工程化能给团队带来更多的收益，后续也会考虑将TypeScript等其他好的方案引入项目。
但是，想要做到可靠、易用，系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法，结合了不少实用的案例，希望对你有所帮助。
1.1、让用户知道自己在哪
没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。
Google的底部导航栏设计
1.2、要经过多少步骤来完成任务
Selecto的调查问卷的设计
数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。
即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。
这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。
AliAli所设计的悬停点击动画
但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的
2.1、单击点赞按钮
Spreadlove,notviruses，作者CharlesPatterson
2.2、开关按钮
这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户
SwitcherXLIV,作者OlegFrolov
2.3、书签按钮微交互
这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。
Bookmarkinteraction，作者OlegFrolov
2.4、添加购物车微交互
在这种情况下，视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。
咖啡下单动效，作者NhatM.Tran
3.1、系统正忙于什么事情
当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。在用户等待的过程中，通常会实用无限加载的动效（一般使用在低于10s的操作中）：
对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候实用进度条会更好：
这些视觉反馈很大程度上降低了系统给人的不确定感。
对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。
Logo闪屏，作者GlebKuznetsov
3.2、内容加载
内容加载，作者GinnyWood
这种设计方式对于移动端和桌面端的设计同样适用：
界面骨架加载动效，作者ShaneDoyle
4.1、通知和提醒
AlekseiKipin设计的通知动效
4.2、提示用户采取行动
随着大众消费生活多元化和个性化的发展，卡通形象在当下社会的影响力变得越来越重要，它们活跃在各个文化领域中，特别是在商业中应用也越来越频繁。
在信息爆炸时代，大多数人对过量的文字信息容易产生排斥的心理，并渐渐乐于接受视觉图像形式的表达；而卡通形象由于其本身简洁的视觉形象，也成为了最理想的视觉传播符号之一。
先罗列几个比较有名的卡通形象
卡通形象一般分为具象动物类型和抽象类型两个方向。一提起动物类比较有名气的卡通形象（比如熊这种动物），你大概会先想到熊本熊、布朗熊、泰迪熊，还有韩国的倒霉熊……兔子类的就是兔斯基、找死兔、可妮兔、流氓兔，还有很早的兔八哥……太多太多。
熊本熊的特征比较明显，一身黑色加上两个红腮点，颜色上本身就给人很潮很时尚的感觉，体型略宽厚偏呆萌。很多女生会觉得它给人一种安全感，我的印象里它一直都是很憨厚的面瘫造型出现，特别是出现在GIF动图里大量真人穿着它的道具摔倒的画面（有了“智障熊”这个外号）比较搞笑，有点愣头愣脑。
流氓兔（MASHIMARO）是一只眯著眼的韩国兔子，随着无厘头文化的兴起，流氓兔调皮又带戏谑的个性通过原创者创作的网络动画形式呈现，其FLASH动画在亚洲乃至全球掀起不小的风潮。
还有监狱兔、兔斯基、兔八哥…这些耳熟能详的形象，这里不一一列举了。
以具象动物创作卡通形象既简单又挺难的，为什么简单？因为不用你去较劲脑汁再重新创造一个新的形象，具象动物（比如熊）就是那个样子。那为什么又很难？具象动物卡通形象太多了，不管你怎么去变着法儿努力画的不一样，但最后的效果可能还是会雷同，况且知名的具象动物IP形象又很多，所以不容易创作。
如何创作一个有特征的卡通形象
那么，今天主要是聊一聊我之前创作过的卡通形象当中的心得体会和一些过程稿。第一个例子是在创作浪小花时候，主要从微博品牌标志找切入点，提取LOGO的主要特征（就是图形头上的三个波浪，如下图），这也是比较能体现卡通形象与品牌之间关系的地方。
前期草图探索是比较漫长和煎熬的，（下图）这些是其中的一部分比较靠谱的草图，尽管只是三个波，但做了很多种不同的变化。比如可以像个公鸡冠一样长在头上，也可以帽子形式戴在头顶上，还可以长在后背上。
在创作形象时是先从PC端的动态表情（下图22px大小）开始的，也就是先从主要使用场景着手，所以做出来的表情利用好有限的展示活动区域，头身比例控制好，既要考虑形象的完整性，又要考虑动作展示能够看得最清楚，还要能突出这个不一样的品牌特征（脑袋上那三个波），这也是一个非常具有挑战性的案例。
到了手机移动端里，表情基本上是把PC上的表情一部分移植过去，不改变比例和动作情况下，尽可能丰富设计的细节。
这里要提的是形象颜色的选择，考虑要最贴近用户，不用微博那么重的红色，由于表情是最开始是用在PC网页版微博文字里，颜色太重就会看来视觉比较突兀，所以选了一个跟人的肤色很近的肉粉色（有点像小婴儿），这样表情用起来就比较具有亲和感。
而在设计微小米的时候选用了LOGO本身的颜色大红色，由于使用场景是手机端聊天对话里（下图），感觉不会那么影响阅读（其实我个人很喜欢这个红色，给人很喜庆的感觉）。
（下图）在确定这个形象之前的一些探索草图这里也发出来，而且这一次创作了三个形象，包括一个白胖子和一只小鸡，（有参考了Line的形象）希望能出一个小家族，这样后期延展运用也能玩起来。
在创作这个形象前，尝试了很多不同的形象（上图），最后采用了这个大红口袋娃娃：脸和身子是连在一起的，也看不到脖子，所以这个形象的特点也就在这里。另外，头上加了一个小揪儿。
（上图）这个是优化前的样子（头上是圆圆的揪儿），为了制作动态GIF时，让头上的小揪儿动起来更带感，就改成了（下图）这个样子，跳起来可以一甩一甩的。
在进行卡通形象提案之前，如果能花点心思做一个小小的场景（下图）也能给自己的方案加分。
每个形象都尝试一些动作变化，这样它们各自的性格就很容易把握了。比如，我会觉得（下图）红框那个表情延伸感觉很猥琐，不太适合这个形象，所以后面的表情延展尽量让微小米表现得更萌一些，避开这种很猥琐的感觉。(当然这些说起来都比较偏个人感受，只有作者自己可以体会到）
把这几个形象性格先摸透很有必要（来一张定妆的全家福）。
我个人比较满意（下图）这一组系列的扁平化风格，没有描线的感觉确实更轻快，偏小清新。
这些不一样的变化都是让这个形象看起来与众不同，让人先记住它，但最打动人的还是这个形象能否跟看到它的人产生互动和共鸣……这也是这个形象的灵魂和存在的意义。
这一个形象的创意点是借用大家都熟知的“小红帽”这个经典童话造型，让这个小人长着胡子，名字和形象就会形成一个心理和视觉的反差。
将自恋、贪吃、自大、邋遢……这些小人物的缺点赋予这个形象，这样一个活脱脱的“小屌丝”的形象可能就会给人很深的记忆。
毕竟生活中大部分人都有着这样那样的缺点，但都希望摆脱囧态，让自己变好的那分励志感。
我很喜欢画一些丑乖的东西，现在大家都审美疲劳了，可爱的东西都乏味了，反而更喜欢一些丑的可爱的形象。那么给这些形象加个厚嘴唇、小胡子什么的，反而很容易出效果。
好了，写到这里……下面的图大家自己发现亮点，自己感受脑补吧……总之，创作形象时还是要抓住大众的心理软肋，先打动自己再去感染别人。
在画卡通形象时候，我们往往很容易陷入两个难以跳出的区域：一个是容易画得偏低幼、低龄化；另一个就是表情动作偏呆板国企风。这是受我们从小周围接收的图像信息影响的，在还没有将练习探索的草图量形成一个质的提升之前，先有这种意识也很重要，这种意识会帮助你在以后摸索练习的时候注意到形象的头身比例，以及思路惯性的打破。
欢迎对品牌、插画和卡通形象感兴趣的朋友可以一起讨论、练习。
A.表达式开关B.表达式图表C.表达式关联器D.表达式语言菜单
由于AE里不同的属性的参数不同，常用的我们可以分为：数值（旋转/不透明度）、数组（位置/缩放）、布尔值（true代表真、false代表假/0代表假、1代表真）这三种形式来进行书写表达式。对于表达式AE也有很多内置的函数命令，直接可以在表达式语言菜单里面进行调用。
原理:
举例:
注意事项:
time只能赋予一维属性的数据。(位置属性可进行单独尺寸的分离，从而可单独设置X或Y上的time)
wiggle(freq,amp,octaves=1,amp_mult=0.5,t=time)
若在一维属性中，为位置属性添加wiggle(10,20)，则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添加n=wiggle(1,10);[n[0],n[0]]，则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。
可直接在现有属性上运行，包括任何关键帧
为每间隔多少数值来产生多少变化
若为图层1的旋转属性添加表达式index*5，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推；若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为(index-1)*5
若对位置属性添加表达式为value+100，则位置会在关键帧数值的基础上对X轴向右偏移100（正数向右侧，负数像左侧）；若想控制Y轴的位置属性，则可对位置属性进行单独尺寸的分割，从而可单独控制Y轴（正数向下，负数向上）
更多的使用场景是结合其他表达式一起应用
5.random表达式（随机表达式）
random(x,y)在数值x到y之间随机进行抽取，最小值为x，最大值为y
若为数字源文本添加表达式random(20)，则数据会随机改变，最大值不会超过20；
若为数字源文本添加表达式random(10,100)，则数据会在10<数值<100之间随机改变；若为数字源文本添加表达式seedRandom(5,timeless=false)，random(50)，则数据会在50以内随机改变（前面的5是种子数，如一张画面中需要多个相同区间的数值做随机变化，就要为他们添加不同的种子数，防止两者随机变化雷同）,若希望数字随机变化为整数则应添加表达式为Math.round(random(2,50))，表示在2和50之间随机改变无小数
随机表达式不仅局限于数据上的使用，其他属性也可以应用，若数值为整数Math的M要大写
以此类推
如下图gif
timeRemap*n，n以帧为单位
将图层设置为timeRemap*10，代表每隔10帧就抽掉1帧画面，(根据要抽取的速率决定)
见下图均以(time,0,3,131,1000)为例，若为数字的源文本属性添加此表达式可以制作出倒计时的效果n=linear(time,0,3,3,0)表示从0-3秒数字从3到0，希望数字为整体需添加Math.floor(）
倒计时的用法比较常用，整数M要大写
degreesToRadians(degrees)角度转为弧度（degrees度的变量或表达式）radiansToDegrees(radians)弧度转为角度（radians弧度的变量或表达式）
常用语数学中的一些计算sin，cos，tan，sec，csc，cot等
layer(index)中index是数值，按照编号检索图层；layer(name)中name是一个字符串，按照名称检索图层（若没有图层名称，则根据源名称）；layer(otherLayer,relIndex)中otherLayer表示图层对象，relIndex表示数值，检索属于图层对象的数值图层
marker.key(index)中index是数值；marker.key(name)中name是一个字符串
width表示返回合成宽度；height表示返回合成高度
[thisComp.width/2,thisComp.height/2]表示宽度和高度为合成的一半也就是居中的位置
param(name)中name表示字符串；param(index)表示数值
effect(“高斯模糊”).param(“模糊度”)效果控制点始终位于图层空间中
复制粘贴表达式使用就可以，amp表示振幅,freq表示频率,decay表示衰减（根据不同需求做不同的调整）
n=0;if(numKeys>0){
n=nearestKey(time).index;
if(key(n).time>time){n–;}}
if(n==0){t=0;}else{
t=time–key(n).time;}
if(n>0){
v=velocityAtTime(key(n).time–thisComp.frameDuration/10);
amp=.03;
freq=2.5;
decay=4.0;
value+v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述内容复制粘贴使用即可
注意:motion2脚本也带此功能，方法不唯一
k=500;a=8;b=30;x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根据不同情况调节kab的数值即可）
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
spd表示挤压拉伸的速度，maxDev表示挤压拉伸的大小，decay表示衰减
spd=20;maxDev=10;
decay=1;
t=time–inPoint;
offset=maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX=scale[0]+offset;scaleY=scale[1]–offset;
[scaleX,scaleY]
delay表示要延迟的帧数
为位置属性添加表达式delay=0.5;
d=delay*thisComp.frameDuration*(index–1);
thisComp.layer(1).position.valueAtTime(time–d)；
如想要实现不透明度拖尾需为不透明度属性添加表达式opacityFactor=.80;
Math.pow(opacityFactor,index–1)*100(调整好一个图层后复制多个)
使用教学
STEP1
开启Basicons从首页就能预览完整图标图案，这套图标特色是以非常精简、干净的线条绘制而成的图形，每个图案下方会有名称，应该能够很快速联想到图标代表的意思（否则就失去图标的意义…），可以稍微预览一下看看自己需要的图案有没有列在上面，依照说明，Basicons每周都会更新加入新的图案。
STEP2
从右侧的「Customize」自订选项可以调整图标尺寸、线条粗细，调整后会直接呈现于左侧。
STEP3
点选要下载的图标后再按下右侧的「Download」就能下载.svg图标格式（或是从上方点选DownloadAll将所有186个图标完整下载），如果想直接取用SVG原始码的话可点选「CopySVG」复制程式码。
除此之外，Basicons还有提供直接嵌入的JavaScript链结和原始码。
import导入模块、export导出模块可以直接在任何变量或者函数前面加上一个export关键字，就可以将它导出。在一个文件中：
exportconstsqrt=Math.sqrt;exportfunctionsquare(x){returnx*x;}exportfunctiondiag(x,y){returnsqrt(square(x)+square(y));}然后在另一个文件中这样引用：import{square,diag}from'lib';console.log(square(11));//121console.log(diag(4,3));总结
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
为了实现页面之间的通讯，或者数据交换，我们要实现一个页面到另一个页面的传参，可以通过点击跳转的时候进行页面之间的传值。
Author:TANKING
Date:2020-8-13
WeChat:face6009
设计输出的方式大概可以分为位图和矢量两种，与常规的图片输出并无太大的差异。位图方式：PNG序列帧、APNG、GIF；矢量方式：Lottie、SVG动画。
当然除了以设计提供的方式之外，还可以设计完成好demo，开发通过代码进行实现例如：javascript直接实现、SVG（可伸缩矢量图形）、CSS3transition、CSS3animation、Canvas动画、requestAnimationFrame由于超出个人能力范畴就不展开讲了。
接下来讲解下各个软件输出对应格式的方法，实际上操作并不会太难，动效本身更重要的还是在于创意本身，因此当你把握了这些方式之后可以考虑进行创意设计。
由于GIF文件多种工具都可以输出，这里就不再作详细说明
1.PNG序列
具体如下视频
2.APNG
如上导出到PNG序列帧，拖拽到iSparta软件中，合成即可。合成时可以选择帧率、循环次数（0为无限循环）、导出质量等。如下视频
3.Lottie
4.SVG动画
建议大家自己下载软件后尝试
5.格式大小比
通过试验几种格式的大小大概是排序依次为：PNG序列>APNG>GIF(质量较差)>Lottie/SVG，json文件和SVG动画文件比较接近，因此可以根据实际考虑决定即可，GIF虽然可以压缩到比较小，但是本身图片质量也较差，因此建议慎重考虑。
学习用什么工具导出什么格式的文件只是第一步，更重要的还是如何制造出一个有创意的动效，因此不要过于强调工具，更多应该培养自己思考设计的习惯。