Skip to content

Commit 30b00af

Browse files
keyboard3keyboard3
committed
对获奖者上优化改进ruler部分
1 parent 47d7570 commit 30b00af

File tree

17 files changed

+235
-243
lines changed

17 files changed

+235
-243
lines changed

‎README.md

+52-64
Original file line numberDiff line numberDiff line change
@@ -2,77 +2,65 @@
22
HenCoder「仿写酷界面」活动——征稿 http://hencoder.com/activity-mock-1
33

44
虽然本作品并未获奖，但本人还是会持续优化....，敬请关注！！！
5-
### 即刻点赞
6-
实现原理：隔离并复用图片动画和文字动画<br>
5+
# 即刻点赞
6+
- 写在前面
7+
```
8+
这个仿写的获奖作者是刘金伟的https://github.com/arvinljw/ThumbUpSample
9+
在揭晓优胜者之后我对比了实现原理，基本原理就是左边炫丽的效果和右边文字上下滚动分离。我在左边的效果实现上忘记了一个光圈的缩放，当时以为是鼠标自己的效果....，比较遗憾！
10+
```
11+
- 实现原理
12+
```
13+
实现原理：隔离并复用图片动画和文字动画
714
LikeView自定义的LinearLayout默认组合点赞文字动画效果
8-
9-
- **LikeImageView**
10-
- 点赞图片动画
11-
<br>**点赞**：
12-
<br>灰色的点赞图标变小至0.9倍-><br>转变成红色的图标并且半透明-><br>红色图标逐渐增长至正常的1.1倍 / 透明度在增长至正常时逐渐变成实体 -><br>最后变成正常大小的红色图标<br>
13-
- 点赞伴随动画光圈
14-
<br>0.6倍点赞图标大小的光圈、半透明-><br>0-50%动画完成度时半透明变成实体-><br>50%-100%动画完成度时实体又逐渐变成透明-><br>光圈半径逐渐增大至1.1倍<br>
15-
**取消点赞**：
16-
<br>红色图标变小至0.9倍且变成半透明 -><br>动画完成到一半时变成灰色的正常大小
17-
- 闪光动画
15+
LikeImageView
16+
点赞图片动画
17+
点赞效果
18+
灰色的点赞图标变小至0.9倍
19+
转变成红色的图标并且半透明
20+
红色图标逐渐增长至正常的1.1倍 / 透明度在增长至正常时逐渐变成实体 最后变成正常大小的红色图标
21+
点赞伴随动画光圈
22+
0.6倍点赞图标大小的光圈、半透明
23+
0-50%动画完成度时半透明变成实体
24+
50%-100%动画完成度时实体又逐渐变成透明
25+
光圈半径逐渐增大至1.1倍
26+
取消点赞效果
27+
红色图标变小至0.9倍且变成半透明 动画完成到一半时变成灰色的正常大小
28+
闪光动画
1829
点赞时 闪光图标在点赞图标顶部的某个位置，先由小到大直至正常大小
19-
- **LikeNumView** [简化了文字实现逻辑]
20-
<br>点赞和取消赞动作导致的文字变化 转变成 原数字->新数字。点赞和取消赞时改动新数字的值(+1/-1)。将两个数字动转为字符串数组，从高位开始循环 如果数字相同就直接画数字，如果数字不同就开始绘制两个数字位移同时设置对应的透明渐变`
21-
22-
**使用代码**
23-
```
24-
<com.keyboard3.hencoderProduct.like.LikeView
25-
android:id="@+id/objectAnimatorView1"
26-
android:layout_width="wrap_content"
27-
android:layout_height="wrap_content"
28-
android:layout_centerInParent="true"
29-
android:layout_margin="10dp"
30-
android:background="#2B2B2B"
31-
app:leftPadding="5dp"
32-
app:likeNum="9"
33-
app:likeSrc="@mipmap/ic_messages_like_selected"
34-
app:middlePadding="5dp"
35-
app:rightPadding="5dp"
36-
app:shiningSrc="@mipmap/ic_messages_like_selected_shining"
37-
app:unlikeSrc="@mipmap/ic_messages_like_unselected" />
30+
LikeNumView
31+
点赞和取消赞动作导致的文字变化 转变成 原数字->新数字。点赞和取消赞时改动新数字的值(+1/-1)。将两个数字动转为字符串数组，从高位开始循环 如果数字相同就直接画数字，如果数字不同就开始绘制两个数字位移同时设置对应的透明渐变`
3832
```
39-
40-
实现原理
33+
- 对比获奖作品
4134
```
42-
子View：子View实现fling效果
43-
边界条件：
44-
min-max 起始端线止于中间刻度
45-
滑动到小数位置自动调整到整数位置
46-
留白控制
47-
绘制准备：
48-
颜色：上下边界线颜色、背景颜色、刻度线颜色、大刻度上文字颜色
49-
width：小刻度宽度、大刻度宽度
50-
height:小刻度高度、大刻度高度
51-
起止刻度值：开始刻度值、终止刻度值、单位长度
52-
size:文字大小
53-
padding:文字距离尺子底部距离
54-
绘制方向处理：刻度线的终点坐标以及文字起始坐标
55-
左布局→：x+height
56-
上布局↓：y+height
57-
右布局←：x-height
58-
下布局↑：y-height
59-
绘制逻辑：
60-
尺子背景：边界线+背景色
61-
尺子刻度：绘制min-max中所有刻度，循环(max-min)*10个刻度 判断如果是10%的倍数就花大刻度并在此之上画上刻度值
62-
滑动逻辑：通过VelocityTracker获得水平滑动速度交给Scroller滚动到这个速度最终的位置
63-
down:停止之前的滚动动画并重新记录VelocityTracker
64-
move:移动内容
65-
up/cancel:计算速度开始滚动
66-
父ViewGroup：绘制中间定格线
67-
交互逻辑：
68-
分发触摸事件给子View
69-
70-
刻度显示View:监听子View的滑动刻度
71-
解耦彻底：监听对象指向子View，子View滑动刻度通知给父View重绘内容
35+
获奖作品之后并没有多大改动
36+
点赞散开点并没有做处理
37+
我主要是在我原来的基础上将基本特效都实现了，包括点赞散开的效果
7238
```
7339
![](images/like.gif)
40+
# 薄荷健康尺
7441

75-
### 薄荷健康尺
42+
- 写在前面
43+
```
44+
这个仿写作品的获奖者是炎之铠的https://github.com/totond/BooheeRuler
45+
在揭晓获奖作品之后,看了当时的实现方式原理一致，中央高亮刻度覆盖尺子之上，尺子刻度值全部绘制出来，然后滑动内容。因为当时滑动交互算是hencoder的超纲内容，因而漏写了这一块很遗憾！
46+
```
47+
- 实现原理
48+
```
49+
分析：
50+
此控件分两块，下方尺子和上方显示的中央刻度值。下方尺子中刻度内容可以滑动而在其上的中央高亮刻度固定。由上分析：将此控件分成两个view，rulerView和rulerNumerView
51+
rulerView:刻度要可以滑动即刻度是一个独立的View,上方固定的中央刻度则是ViewGroup在刻度子View绘制完成之后在上面覆盖绘制一个高亮的刻度线
52+
rulerNumberView:实时监听rulerView的刻度滚动经过中央高亮刻度线时的值显示
53+
```
54+
- 对比获奖作品
55+
```
56+
获奖作品在众星捧月中不断进步,截止0.1.3版本
57+
功能上：实现了尺子的左上右下的四种显示方向
58+
性能上：每次重绘只绘制当前显示部分刻度
59+
我觉得它已经做的很完美了，但是我觉得还是有些补足之处的。
60+
1.实现四种显示方向结构太臃肿、完全可以直接在InnerRuler中绘制刻度和文字等处做方向处理调整绘制坐标
61+
2.监听刻度值的View可以做的更加解耦一些，rulerView和rulerNumberView可以做到1:n
62+
我这里在他的作品之上做了上面我所说的改造，因为时间关系我阉割了他边界阴影效果
63+
```
7664

7765
![](images/ruler.gif)
7866

‎app/build.gradle

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@ dependencies {
3131
compile 'com.android.support:support-core-ui:25.3.1'
3232
compile 'com.android.support:design:25.3.1'
3333
testCompile 'junit:junit:4.12'
34-
implementation project(':ruler')
34+
compile project(':ruler')
3535
}

‎app/src/main/java/com/keyboard3/hencoderProduct/ruler/RulerLayout.java

-7
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@
1010

1111

1212
public class RulerLayout extends RelativeLayout {
13-
RulerNumberView view;
14-
Button animateBt;
15-
1613
public RulerLayout(Context context) {
1714
super(context);
1815
}
@@ -25,8 +22,4 @@ public RulerLayout(Context context, AttributeSet attrs, int defStyleAttr) {
2522
super(context, attrs, defStyleAttr);
2623
}
2724

28-
@Override
29-
protected void onAttachedToWindow() {
30-
super.onAttachedToWindow();
31-
}
3225
}

‎app/src/main/java/com/keyboard3/hencoderProduct/ruler/RulerNumberView.java

-102
This file was deleted.

‎app/src/main/res/layout/ruler_layout.xml

+90-23
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@
1010
android:gravity="center"
1111
android:orientation="vertical">
1212

13-
<yanzhikai.ruler.RulerNumberLayout
13+
<com.keyboard3.RulerNumberLayout
1414
android:id="@+id/knl_bottom_head"
1515
android:layout_width="match_parent"
1616
android:layout_height="wrap_content"
1717
app:kgTextSize="20sp"
18-
app:scaleTextSize="50sp"
19-
app:targetRuler="@id/br_bottom_head" />
18+
app:scaleTextSize="50sp" />
2019

21-
<yanzhikai.ruler.BooheeRuler
22-
android:id="@+id/br_bottom_head"
20+
<com.keyboard3.BooheeRuler
21+
android:id="@+id/br_top_head"
2322
android:layout_width="match_parent"
2423
android:layout_height="100dp"
2524
android:layout_alignParentTop="true"
@@ -34,29 +33,97 @@
3433
app:minScale="464"
3534
app:numberTextSize="22sp"
3635
app:paddingStartAndEnd="10dp"
36+
app:rulerStyle="top"
37+
app:scaleInterval="11.5dp"
38+
app:smallScaleLength="20dp"
39+
app:smallScaleWidth="1.5dp"
40+
app:targetRulerNumber="@id/knl_bottom_head"
41+
app:textMarginHead="70dp" />
42+
43+
<com.keyboard3.BooheeRuler
44+
android:id="@+id/br_bottom_head"
45+
android:layout_width="match_parent"
46+
android:layout_height="100dp"
47+
android:layout_alignParentTop="true"
48+
app:bigScaleLength="40dp"
49+
app:bigScaleWidth="2.5dp"
50+
app:count="10"
51+
app:currentScale="3456"
52+
app:cursorDrawable="@drawable/cursor_shape"
53+
app:cursorHeight="45dp"
54+
app:cursorWidth="4dp"
55+
app:maxScale="2000000"
56+
app:minScale="464"
57+
app:numberTextSize="22sp"
58+
app:paddingStartAndEnd="10dp"
3759
app:rulerStyle="bottom"
3860
app:scaleInterval="11.5dp"
3961
app:smallScaleLength="20dp"
4062
app:smallScaleWidth="1.5dp"
63+
app:targetRulerNumber="@id/knl_bottom_head"
4164
app:textMarginHead="70dp" />
42-
</LinearLayout>
4365

44-
<com.keyboard3.hencoderProduct.ruler.RulerNumberView
45-
android:id="@+id/objectAnimatorView"
46-
android:layout_width="match_parent"
47-
android:layout_height="match_parent"
48-
android:layout_centerInParent="true"
49-
android:visibility="gone" />
50-
51-
<Button
52-
android:id="@+id/animateBt"
53-
android:layout_width="wrap_content"
54-
android:layout_height="48dp"
55-
android:layout_alignParentBottom="true"
56-
android:layout_alignParentEnd="true"
57-
android:layout_margin="8dp"
58-
android:text="@string/animate"
59-
android:textSize="16sp"
60-
android:visibility="gone" />
66+
<LinearLayout
67+
android:layout_width="match_parent"
68+
android:layout_height="match_parent"
69+
android:orientation="horizontal"
70+
android:padding="10dp">
6171

72+
<com.keyboard3.BooheeRuler
73+
android:id="@+id/br_left_head"
74+
android:layout_width="100dp"
75+
android:layout_height="match_parent"
76+
android:layout_alignParentTop="true"
77+
app:bigScaleLength="40dp"
78+
app:bigScaleWidth="2.5dp"
79+
app:count="10"
80+
app:currentScale="23"
81+
app:cursorDrawable="@drawable/cursor_shape"
82+
app:cursorHeight="45dp"
83+
app:cursorWidth="4dp"
84+
app:maxScale="2000000"
85+
app:minScale="464"
86+
app:numberTextSize="22sp"
87+
app:paddingStartAndEnd="10dp"
88+
app:rulerStyle="left"
89+
app:scaleInterval="11.5dp"
90+
app:smallScaleLength="20dp"
91+
app:smallScaleWidth="1.5dp"
92+
app:targetRulerNumber="@id/knl_bottom_head"
93+
app:textMarginHead="70dp" />
94+
95+
<com.keyboard3.RulerNumberLayout
96+
android:id="@+id/knl_number"
97+
android:layout_width="match_parent"
98+
android:layout_height="wrap_content"
99+
android:layout_weight="1"
100+
app:kgTextSize="20sp"
101+
app:kgUnitText="km"
102+
app:scaleTextSize="50sp"
103+
app:targetRuler="@id/br_bottom_head" />
104+
105+
<com.keyboard3.BooheeRuler
106+
android:id="@+id/br_right_head"
107+
android:layout_width="100dp"
108+
android:layout_height="match_parent"
109+
android:layout_alignParentTop="true"
110+
app:bigScaleLength="40dp"
111+
app:bigScaleWidth="2.5dp"
112+
app:count="10"
113+
app:currentScale="99"
114+
app:cursorDrawable="@drawable/cursor_shape"
115+
app:cursorHeight="45dp"
116+
app:cursorWidth="4dp"
117+
app:maxScale="2000000"
118+
app:minScale="464"
119+
app:numberTextSize="22sp"
120+
app:paddingStartAndEnd="10dp"
121+
app:rulerStyle="right"
122+
app:scaleInterval="11.5dp"
123+
app:smallScaleLength="20dp"
124+
app:smallScaleWidth="1.5dp"
125+
app:targetRulerNumber="@id/knl_bottom_head"
126+
app:textMarginHead="70dp" />
127+
</LinearLayout>
128+
</LinearLayout>
62129
</com.keyboard3.hencoderProduct.ruler.RulerLayout>

‎images/ruler.gif

3.3 MB
Loading

0 commit comments

Comments
 (0)