Skip to content

Fix broken headings in Markdown files #5

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ JJSearchViewAnim

![](http://ww1.sinaimg.cn/mw690/7ef01fcagw1f2kefqi8ekj205s05s749.jpg)

####一个炫酷的SearchView搜索动画库,希望你喜欢!
#### 一个炫酷的SearchView搜索动画库,希望你喜欢!


<table>
Expand Down Expand Up @@ -75,7 +75,7 @@ JJSearchViewAnim
</table>
* 注意:最后一个效果[MaterialSearchView](https://github.com/android-cjj/MaterialSearchView),由于之前有写过,就没有集合进去了.

###使用说明
### 使用说明

#### (1) 在布局文件xml中
```xml
Expand Down Expand Up @@ -108,11 +108,11 @@ mJJSearchView.startAnim();
mJJSearchView.resetAnim();
```

####源码分析及如何在项目中实现:[JJSearchViewAnim源码分析](http://www.jianshu.com/p/a48f4e6cf036)
#### 源码分析及如何在项目中实现:[JJSearchViewAnim源码分析](http://www.jianshu.com/p/a48f4e6cf036)

###概要
### 概要

#####前言:周末强撸一个库,差点灰飞烟灭.无妨,人生自古谁无死,来生继续撸代码.
##### 前言:周末强撸一个库,差点灰飞烟灭.无妨,人生自古谁无死,来生继续撸代码.

立马入主题,几乎每个App都有搜索功能,然而形式千篇一律。我举个例子吧,就微信来说:

Expand All @@ -127,17 +127,17 @@ mJJSearchView.resetAnim();

此时,如果你看完表格那些动画,喜欢上它时,想知道他们是怎么在代码中实现的,没问题,我这就手把手教你撩一个绚丽的SearchViewAnim , 呵呵,有点吹大了,说说我怎么实现的吧。

###实现思路
### 实现思路

我们先对第一行表格的设计图进行仔细观察 ,效果是SearchView是由一个圆圈和一条直线(尾巴)构成的,开启动画时,尾巴慢慢消失成一点,然后这一点(dot) 进入圆圈内时,泛起波纹,在圈内四处逗留,然后在圆圈中心点停留闪烁,短暂的思考了下人生,又冲出去乖乖做一条尾巴。

咳,这是一个顿悟生命的dot啊!

相信大家通过我形象的描述已经知道效果是怎样了,现在就把刚刚描叙的画出来吧。

###实现绘制
### 实现绘制

####(1) 自定义类SearchView继承View
#### (1) 自定义类SearchView继承View

重写` onDraw(Canvas canvas)`方法,利用画笔Paint在画布Canvas绘制一个普通的的视图,如下:

Expand All @@ -158,7 +158,7 @@ canvas.drawCircle(cx, cy, cr, paint);
```
这一步比较简单,就不多说了。

####(2) 实现动画效果,这里的动画有dot进入圈圈时泛起的波浪效果和dot在圈圈内的运行轨迹。
#### (2) 实现动画效果,这里的动画有dot进入圈圈时泛起的波浪效果和dot在圈圈内的运行轨迹。

因为运行轨迹是固定的,我们把经过的路径设置给Path,在构造`PathMeasure`函数(不知道PathMeasure用法的同学自己搜索学习),使用它两个方法`getLength()`,.可获取dot运行路径的长度,`getPosTan(float distance, float pos[],float tan[])`可根据distance可以获取dot的坐标点pos[].
写成代码就是:
Expand All @@ -178,19 +178,19 @@ canvas.drawCircle(cx, cy, cr, paint);

至于dot进入圈圈时泛起的波浪效果,其实就是曲线的不断扩大而已,这里我们可以利用贝塞尔函数`quadTo()`,不断改变控制点来实现该效果。

####(3)收尾Reset
#### (3)收尾Reset

因为结束动画之后,视图和开始时一样,所以我们并不需要绘制Reset时的动画,只需重置状态就可以了,而如果是有些情况,比如动画停止后是箭头的效果,就需要要逆着回去绘制SearchView的过程了。

其他动画效果也是这样一步一步把复杂的东西简单化,最后你发现无非就是画线、画曲线、画弧、画圆这些,我就偷个懒,不讲剩下效果的的实现方式了,自己看看源码,可能比我吹水有用的多。

###杂谈
### 杂谈
写这些花费的时间、精力还是挺多的,因为需要一些数学计算(我数学烂)和不断的调试才能绘制满意的效果,所以建议如果项目需要,可以在别人实现的轮子上改改就好。我们都知道,一个App只能有一种风格,所以加入很多样式的动画是没必要的,修改一种合适自己的就好。

水平有限及写的随意,该库还是有不少问题,也希望你能PR,完善它。


###关于我
### 关于我
如果你喜欢这个东东的话,可以关注我[github](https://github.com/android-cjj) ,也可以关注我微博[Android_cJJ](http://weibo.com/chenjijun2011/).


Expand Down
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ JJSearchViewAnim

![](http://ww1.sinaimg.cn/mw690/7ef01fcagw1f2kefqi8ekj205s05s749.jpg)

####A cool search view animation library ,I hope you like it.
#### A cool search view animation library ,I hope you like it.

###look
### look
<table>
<thead>
<tr>
Expand Down Expand Up @@ -77,7 +77,7 @@ JJSearchViewAnim
</table>
* The last effect you can find here:[MaterialSearchView](https://github.com/android-cjj/MaterialSearchView)

###Usage
### Usage
#### (1) In xml
```xml
<RelativeLayout
Expand Down Expand Up @@ -109,7 +109,7 @@ mJJSearchView.startAnim();
mJJSearchView.resetAnim();
```

####Thanks:
#### Thanks:

[http://www.materialup.com/posts/search-0c73a055-dcc9-486f-8540-f9517204edf8](http://www.materialup.com/posts/search-0c73a055-dcc9-486f-8540-f9517204edf8)

Expand All @@ -128,7 +128,7 @@ mJJSearchView.resetAnim();
[http://www.materialup.com/posts/css3-jquery-material-design-close-animation](http://www.materialup.com/posts/css3-jquery-material-design-close-animation)


####About me
#### About me
A low-level android software development engineer, like watching cartoons, like playing football, love life ! If you want to make friends with me, You can email tell me.Email address: cjjcjj2014@gmail.com.


Expand Down