重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她;
创新互联公司长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为杜尔伯特企业提供专业的成都网站设计、网站建设、外贸网站建设,杜尔伯特网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢;
好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效;
今天主要分享水波纹效果:
1.标准正余弦水波纹;
2.非标准圆形液柱水波纹;
虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffXfermode);
先看效果:
自定义View根据实际情况可以选择继承自View、TextView、ImageView或其他,我们先只需要了解如何利用Android给我们提供好的利刃去满足UI妹纸;
这次的实现我们都选择继承view,在实现的过程中我们需要关注如下几个方法:
1.onMeasure():最先回调,用于控件的测量;
2.onSizeChanged():在onMeasure后面回调,可以拿到view的宽高等数据,在横竖屏切换时也会回调;
3.onDraw():真正的绘制部分,绘制的代码都写到这里面;
既然如此,我们先复写这三个方法,然后来实现如上两个效果;
一:标准正余弦水波纹
这种水波纹可以用具体函数模拟出具体的轨迹,所以思路基本如下:
1.确定水波函数方程
2.根据函数方程得出每一个波纹上点的坐标;
3.将水波进行平移,即将水波上的点不断的移动;
4.不断的重新绘制,生成动态水波纹;
有了上面的思路,我们一步一步进行实现:
正余弦函数方程为:
y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相;
根据上面的方程选取自己觉得中意的波纹效果,确定对应参数的取值;
然后根据确定好的方程得出所有的方程上y的数值,并将所有y值保存在数组里:
// 将周期定为view总宽度 mCycleFactorW = (float) (2 * Math.PI / mTotalWidth); // 根据view总宽度得出所有对应的y值 for (int i = 0; i < mTotalWidth; i++) { mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y); }