Skip to content

Commit 0005611

Browse files
sqlcnsqlcn
committed
为兼容github显示修改md文件标签为全图片
1 parent 4ef261e commit 0005611

8 files changed

Lines changed: 18 additions & 126 deletions

File tree

‎img/step-0.png‎

7.41 KB
Loading

‎img/step-1.png‎

7.68 KB
Loading

‎img/step-2.png‎

7.51 KB
Loading

‎img/step-3.png‎

8.38 KB
Loading

‎img/step-4.png‎

8.88 KB
Loading

‎img/step-5.png‎

8.99 KB
Loading

‎img/step-6.png‎

7.15 KB
Loading

‎栈的动画演示设计案.md‎

Lines changed: 18 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,26 @@
11
## 动画设计
22
想象一下，我们有这么一串输入字符“21+3*152--”，每一个字符就是一个台球。那么就有这样一串按顺序排列测台球：
3-
<img src="img/ball-2.png" width="24px"><img src="img/ball-1.png" width="24px"><img src="img/ball-add.png" width="24px"><img src="img/ball-3.png" width="24px"><img src="img/ball-mul.png" width="24px"><img src="img/ball-1.png" width="24px"><img src="img/ball-5.png" width="24px"><img src="img/ball-2.png" width="24px"><img src="img/ball-sub.png" width="24px"><img src="img/ball-sub.png" width="24px">。而“栈”就想象成一个上面开口的长桶，
4-
<div style="display: flex;
5-
flex-direction: row;">
6-
<div>
7-
<img src="img/tube.png" width="42px">
8-
</div>
9-
<div>
10-
<img src="img/ball-2.png" width="24px">
11-
<img src="img/ball-1.png" width="24px">
12-
<img src="img/ball-add.png" width="24px">
13-
<img src="img/ball-3.png" width="24px">
14-
<img src="img/ball-mul.png" width="24px">
15-
<img src="img/ball-1.png" width="24px">
16-
<img src="img/ball-5.png" width="24px">
17-
<img src="img/ball-2.png" width="24px">
18-
<img src="img/ball-sub.png" width="24px">
19-
<img src="img/ball-sub.png" width="24px">
20-
</div>
21-
</div>
22-
桶的口径刚好可以放进一个球，
23-
<div style="display: flex;
24-
flex-direction: row;">
25-
<div>
26-
<img src="img/tube.png" width="42px">
27-
<img src="img/ball-2.png" width="24px" style="position: relative; left: -37px; top: -6px">
28-
</div>
29-
<div>
30-
<img src="img/ball-1.png" width="24px">
31-
<img src="img/ball-add.png" width="24px">
32-
<img src="img/ball-3.png" width="24px">
33-
<img src="img/ball-mul.png" width="24px">
34-
<img src="img/ball-1.png" width="24px">
35-
<img src="img/ball-5.png" width="24px">
36-
<img src="img/ball-2.png" width="24px">
37-
<img src="img/ball-sub.png" width="24px">
38-
<img src="img/ball-sub.png" width="24px">
39-
</div>
40-
</div>
3+
<img src="img/ball-2.png" width="24px"><img src="img/ball-1.png" width="24px"><img src="img/ball-add.png" width="24px"><img src="img/ball-3.png" width="24px"><img src="img/ball-mul.png" width="24px"><img src="img/ball-1.png" width="24px"><img src="img/ball-5.png" width="24px"><img src="img/ball-2.png" width="24px"><img src="img/ball-sub.png" width="24px"><img src="img/ball-sub.png" width="24px">。而“栈”就想象成一个上面开口的长桶，
4+
<img src="img/step-0.png">
5+
6+
桶的口径刚好可以放进一个球，
7+
<img src="img/step-1.png">
8+
419
我们把球一个个放进桶中，或从桶里拿出的过程球就好像进栈和出栈的过程，用动画来展示出来。
42-
<div style="display: flex;
43-
flex-direction: row;">
44-
<div>
45-
<img src="img/tube.png" width="42px">
46-
<img src="img/ball-2.png" width="24px" style="position: relative; left: -37px; top: -6px">
47-
<img src="img/ball-1.png" width="24px" style="position: relative; left: -65px; top: -30px">
48-
</div>
49-
<div>
50-
<img src="img/ball-add.png" width="24px">
51-
<img src="img/ball-3.png" width="24px">
52-
<img src="img/ball-mul.png" width="24px">
53-
<img src="img/ball-1.png" width="24px">
54-
<img src="img/ball-5.png" width="24px">
55-
<img src="img/ball-2.png" width="24px">
56-
<img src="img/ball-sub.png" width="24px">
57-
<img src="img/ball-sub.png" width="24px">
58-
</div>
59-
</div>
10+
11+
<img src="img/step-2.png">
12+
6013
如果碰到运算符，就以相反顺序取出小球参与运算，得到代表结果的新的台球球，
61-
<div style="display: flex;
62-
flex-direction: row;">
63-
<div>
64-
<img src="img/tube.png" width="42px">
65-
<img src="img/ball-2.png" width="24px" style="position: relative; left: -37px; top: -6px">
66-
<img src="img/ball-1.png" width="24px" style="position: relative; left: -65px; top: -30px">
67-
</div>
68-
<div>
69-
<img src="img/ball-add.png" width="24px" style="position: relative; top: 56px">
70-
<img src="img/ball-3.png" width="24px">
71-
<img src="img/ball-mul.png" width="24px">
72-
<img src="img/ball-1.png" width="24px">
73-
<img src="img/ball-5.png" width="24px">
74-
<img src="img/ball-2.png" width="24px">
75-
<img src="img/ball-sub.png" width="24px">
76-
<img src="img/ball-sub.png" width="24px">
77-
</div>
78-
</div>
79-
<div style="display: flex;
80-
flex-direction: row;">
81-
<div>
82-
<img src="img/tube.png" width="42px">
83-
<img src="img/ball-2.png" width="24px" style="position: relative; left: -37px; top: -6px">
84-
</div>
85-
<div>
86-
<img src="img/ball-1.png" width="24px" style="position: relative; top: 57px">
87-
<img src="img/ball-add.png" width="24px" style="position: relative; top: 56px">
88-
<img src="img/ball-3.png" width="24px">
89-
<img src="img/ball-mul.png" width="24px">
90-
<img src="img/ball-1.png" width="24px">
91-
<img src="img/ball-5.png" width="24px">
92-
<img src="img/ball-2.png" width="24px">
93-
<img src="img/ball-sub.png" width="24px">
94-
<img src="img/ball-sub.png" width="24px">
95-
</div>
96-
</div>
97-
<div style="display: flex;
98-
flex-direction: row;">
99-
<div>
100-
<img src="img/tube.png" width="42px">
101-
</div>
102-
<div>
103-
<img src="img/ball-1.png" width="24px" style="position: relative; top: 57px">
104-
<img src="img/ball-add.png" width="24px" style="position: relative; top: 56px">
105-
<img src="img/ball-2.png" width="24px" style="position: relative; top: 56px">
106-
<img src="img/ball-3.png" width="24px">
107-
<img src="img/ball-mul.png" width="24px">
108-
<img src="img/ball-1.png" width="24px">
109-
<img src="img/ball-5.png" width="24px">
110-
<img src="img/ball-2.png" width="24px">
111-
<img src="img/ball-sub.png" width="24px">
112-
<img src="img/ball-sub.png" width="24px">
113-
</div>
114-
</div>
14+
<img src="img/step-3.png">
15+
16+
<img src="img/step-4.png">
17+
18+
<img src="img/step-5.png">
19+
11520
再放回桶中。
116-
<div style="display: flex;
117-
flex-direction: row;">
118-
<div>
119-
<img src="img/tube.png" width="42px">
120-
<img src="img/ball-3.png" width="24px" style="position: relative; left: -37px; top: -6px">
121-
</div>
122-
<div>
123-
<img src="img/ball-3.png" width="24px">
124-
<img src="img/ball-mul.png" width="24px">
125-
<img src="img/ball-1.png" width="24px">
126-
<img src="img/ball-5.png" width="24px">
127-
<img src="img/ball-2.png" width="24px">
128-
<img src="img/ball-sub.png" width="24px">
129-
<img src="img/ball-sub.png" width="24px">
130-
</div>
131-
</div>
21+
22+
<img src="img/step-6.png">
23+
13224

13325
## 类的设计
13426
```

0 commit comments

Comments
 (0)