├── .gitignore ├── 1.gif ├── LICENSE ├── OpAnimationView.java ├── README.md └── attrs.xml /.gitignore: -------------------------------------------------------------------------------- 1 | # Built application files 2 | *.apk 3 | *.ap_ 4 | 5 | # Files for the Dalvik VM 6 | *.dex 7 | 8 | # Java class files 9 | *.class 10 | 11 | # Generated files 12 | bin/ 13 | gen/ 14 | 15 | # Gradle files 16 | .gradle/ 17 | build/ 18 | /*/build/ 19 | 20 | # Local configuration file (sdk path, etc) 21 | local.properties 22 | 23 | # Proguard folder generated by Eclipse 24 | proguard/ 25 | 26 | # Log Files 27 | *.log 28 | -------------------------------------------------------------------------------- /1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanks-zyh/OpAnimateView/9d20c729a326208dc19039068a313d88d57545ad/1.gif -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /OpAnimationView.java: -------------------------------------------------------------------------------- 1 | /* 2 | * Created by Hanks 3 | * Copyright (c) 2015 Nashangban. All rights reserved 4 | * 5 | */ 6 | package app.hanks.com.customanimateview.OpAnimateView; 7 | 8 | import android.animation.ValueAnimator; 9 | import android.annotation.TargetApi; 10 | import android.content.Context; 11 | import android.content.res.TypedArray; 12 | import android.graphics.Canvas; 13 | import android.graphics.Color; 14 | import android.graphics.Paint; 15 | import android.graphics.PointF; 16 | import android.os.Build; 17 | import android.util.AttributeSet; 18 | import android.view.View; 19 | 20 | import java.util.ArrayList; 21 | import java.util.List; 22 | 23 | import app.hanks.com.customanimateview.R; 24 | 25 | /** 26 | * Created by Hanks on 2015/5/27. 27 | */ 28 | public class OpAnimationView extends View { 29 | 30 | private Paint paint; 31 | private Paint paintShadow; 32 | 33 | private int width; 34 | private int height; 35 | private int c; 36 | 37 | private boolean isAnimating = false; //is isAnimating? 38 | private boolean isRgihtShape = false; //is in right_shap? 39 | 40 | private float progress; //animation‘s progress 41 | private int DURATION = 300; // animation DURATION 42 | private int r; //randius 43 | private int shadowWidth; //shadow randius 44 | private int defaultShapeWidth; 45 | private int shapeWidth; 46 | private int shapeRadius; 47 | private int defaultShapeRadius; 48 | 49 | public OpAnimationView(Context context) { 50 | this(context, null); 51 | } 52 | 53 | public OpAnimationView(Context context, AttributeSet attrs) { 54 | this(context, attrs, 0); 55 | } 56 | 57 | public OpAnimationView(Context context, AttributeSet attrs, int defStyleAttr) { 58 | super(context, attrs, defStyleAttr); 59 | init(context, attrs, defStyleAttr); 60 | } 61 | 62 | @TargetApi(Build.VERSION_CODES.LOLLIPOP) 63 | public OpAnimationView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { 64 | super(context, attrs, defStyleAttr, defStyleRes); 65 | } 66 | 67 | /** 68 | * init paint 69 | * 70 | * @param context 71 | * @param attrs 72 | * @param defStyleAttr 73 | */ 74 | private void init(Context context, AttributeSet attrs, int defStyleAttr) { 75 | 76 | defaultShapeWidth = dp2px(4); 77 | defaultShapeRadius = dp2px(10); 78 | 79 | paint = new Paint(Paint.ANTI_ALIAS_FLAG); 80 | 81 | paintShadow = new Paint(Paint.ANTI_ALIAS_FLAG); 82 | setLayerType(LAYER_TYPE_SOFTWARE, paintShadow); 83 | 84 | shadowWidth = dp2px(4); 85 | paintShadow.setShadowLayer(shadowWidth, 0.0f, dp2px(2), Color.parseColor("#66000000")); 86 | 87 | 88 | // load the styled attributes and set their properties 89 | TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.OpAnimationView, defStyleAttr, 0); 90 | 91 | setBackgroundColor(attributes.getColor(R.styleable.OpAnimationView_backgroundColor, Color.parseColor("#FF4081"))); 92 | setShapeColor(attributes.getColor(R.styleable.OpAnimationView_shapeColor, Color.parseColor("#ffffff"))); 93 | shapeWidth = attributes.getDimensionPixelOffset(R.styleable.OpAnimationView_shapeWidth, defaultShapeWidth); 94 | shapeRadius = attributes.getDimensionPixelOffset(R.styleable.OpAnimationView_shapeRadius, defaultShapeRadius); 95 | setShapeWidth(shapeWidth); 96 | setShapeRadius(shapeRadius); 97 | 98 | // We no longer need our attributes TypedArray, give it back to cache 99 | attributes.recycle(); 100 | 101 | } 102 | 103 | 104 | private List points = new ArrayList<>(); 105 | 106 | @Override 107 | protected void onSizeChanged(int w, int h, int oldw, int oldh) { 108 | super.onSizeChanged(w, h, oldw, oldh); 109 | width = w; 110 | height = h; 111 | r = Math.min(w, h) / 2 - shadowWidth; 112 | float g2 = (float) Math.sqrt(2); 113 | c = (int) (r / g2); 114 | float dis = r - c + dp2px(4); 115 | 116 | float x = w / 2; 117 | float y = h / 2; 118 | 119 | points.clear(); 120 | 121 | 122 | float d = shapeWidth / g2 / 2; 123 | points.add(new PointF(x, y - shapeRadius)); 124 | points.add(new PointF(x, y + shapeRadius)); 125 | points.add(new PointF(x - shapeRadius, y)); 126 | points.add(new PointF(x + shapeRadius, y)); 127 | points.add(new PointF(x - shapeRadius - shapeRadius, y)); 128 | points.add(new PointF(x - (2 - g2) * shapeRadius + d, y + g2 * shapeRadius + d)); 129 | points.add(new PointF(x - (2 - g2) * shapeRadius - d, y + g2 * shapeRadius + d)); 130 | points.add(new PointF(x + (3*g2-2) * shapeRadius, y - g2 * shapeRadius)); 131 | 132 | 133 | /*points.add(new PointF(c + dis, c / 3f + dis)); 134 | points.add(new PointF(c + dis, c * 5f / 3f + dis)); 135 | points.add(new PointF(c / 3f + dis, c + dis)); 136 | points.add(new PointF(c * 5f / 3f + dis, c + dis)); 137 | points.add(new PointF(c * (1 + 3 * g2) / 3f + dis, c * (3 - g2) / 3f + dis)); 138 | points.add(new PointF(c * (1 + g2) / 3f + shapeWidth / g2 / 2 + dis, c * (3 + g2) / 3f + shapeWidth / g2 / 2 + dis)); 139 | points.add(new PointF(c * (1 + g2) / 3f - shapeWidth / g2 / 2 + dis, c * (3 + g2) / 3f + shapeWidth / g2 / 2 + dis));*/ 140 | } 141 | 142 | //set background circle color 143 | public void setBackgroundColor(int color) { 144 | paintShadow.setColor(color); 145 | } 146 | 147 | //set center shape color 148 | public void setShapeColor(int color) { 149 | paint.setColor(color); 150 | } 151 | 152 | public void setShapeWidth(int width) { 153 | paint.setStrokeWidth(width); 154 | } 155 | 156 | //set the add_shape's radius 157 | public void setShapeRadius(int radius) { 158 | shapeRadius = radius; 159 | 160 | } 161 | 162 | @Override 163 | protected void onDraw(Canvas canvas) { 164 | 165 | canvas.drawCircle(width / 2, height / 2, r, paintShadow); 166 | /* 167 | if (isRgihtShape) { // right --> add 168 | float x0 = (points.get(0).x - points.get(4).x) * progress + points.get(4).x; 169 | float y0 = (points.get(0).y - points.get(4).y) * progress + points.get(4).y; 170 | float x1 = (points.get(1).x - points.get(6).x) * progress + points.get(6).x; 171 | float y1 = (points.get(1).y - points.get(6).y) * progress + points.get(6).y; 172 | 173 | float x2 = points.get(2).x; 174 | float y2 = points.get(2).y; 175 | float x3 = (points.get(3).x - points.get(5).x) * progress + points.get(5).x; 176 | float y3 = (points.get(3).y - points.get(5).y) * progress + points.get(5).y; 177 | canvas.drawLine(x0, y0, x1, y1, paint); 178 | canvas.drawLine(x2, y2, x3, y3, paint); 179 | 180 | } else { //add --> right 181 | 182 | float x0 = (points.get(4).x - points.get(0).x) * progress + points.get(0).x; 183 | float y0 = (points.get(4).y - points.get(0).y) * progress + points.get(0).y; 184 | float x1 = (points.get(6).x - points.get(1).x) * progress + points.get(1).x; 185 | float y1 = (points.get(6).y - points.get(1).y) * progress + points.get(1).y; 186 | 187 | float x2 = points.get(2).x; 188 | float y2 = points.get(2).y; 189 | float x3 = (points.get(5).x - points.get(3).x) * progress + points.get(3).x; 190 | float y3 = (points.get(5).y - points.get(3).y) * progress + points.get(3).y; 191 | canvas.drawLine(x0, y0, x1, y1, paint); 192 | canvas.drawLine(x2, y2, x3, y3, paint); 193 | }*/ 194 | 195 | if (isRgihtShape) { // right --> add 196 | float x0 = (points.get(0).x - points.get(7).x) * progress + points.get(7).x; 197 | float y0 = (points.get(0).y - points.get(7).y) * progress + points.get(7).y; 198 | float x1 = (points.get(1).x - points.get(6).x) * progress + points.get(6).x; 199 | float y1 = (points.get(1).y - points.get(6).y) * progress + points.get(6).y; 200 | 201 | float x2 = (points.get(2).x - points.get(4).x) * progress + points.get(4).x; 202 | float y2 = (points.get(2).y - points.get(4).y) * progress + points.get(4).y; 203 | 204 | float x3 = (points.get(3).x - points.get(5).x) * progress + points.get(5).x; 205 | float y3 = (points.get(3).y - points.get(5).y) * progress + points.get(5).y; 206 | canvas.drawLine(x0, y0, x1, y1, paint); 207 | canvas.drawLine(x2, y2, x3, y3, paint); 208 | 209 | } else { //add --> right 210 | 211 | float x0 = (points.get(7).x - points.get(0).x) * progress + points.get(0).x; 212 | float y0 = (points.get(7).y - points.get(0).y) * progress + points.get(0).y; 213 | float x1 = (points.get(6).x - points.get(1).x) * progress + points.get(1).x; 214 | float y1 = (points.get(6).y - points.get(1).y) * progress + points.get(1).y; 215 | 216 | float x2 = (points.get(4).x - points.get(2).x) * progress + points.get(2).x; 217 | float y2 = (points.get(4).y - points.get(2).y) * progress + points.get(2).y; 218 | 219 | float x3 = (points.get(5).x - points.get(3).x) * progress + points.get(3).x; 220 | float y3 = (points.get(5).y - points.get(3).y) * progress + points.get(3).y; 221 | canvas.drawLine(x0, y0, x1, y1, paint); 222 | canvas.drawLine(x2, y2, x3, y3, paint); 223 | } 224 | } 225 | 226 | public boolean isRightShape() { 227 | return isRgihtShape; 228 | } 229 | 230 | /** 231 | * add_shape to right_shape 232 | */ 233 | public void add2right() { 234 | if (isAnimating) { 235 | return; 236 | } 237 | progress = 0f; 238 | isAnimating = true; 239 | ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1); 240 | valueAnimator.setDuration(DURATION); 241 | valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 242 | @Override 243 | public void onAnimationUpdate(ValueAnimator animation) { 244 | progress = (float) animation.getAnimatedValue(); 245 | if (progress >= 1) { 246 | isRgihtShape = true; 247 | isAnimating = false; 248 | } else { 249 | invalidate(); 250 | } 251 | } 252 | }); 253 | valueAnimator.start(); 254 | } 255 | 256 | 257 | /** 258 | * right_shape to add_shape 259 | */ 260 | public void right2add() { 261 | if (isAnimating) { 262 | return; 263 | } 264 | progress = 0f; 265 | isAnimating = true; 266 | ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1); 267 | valueAnimator.setDuration(DURATION); 268 | valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 269 | @Override 270 | public void onAnimationUpdate(ValueAnimator animation) { 271 | progress = (float) animation.getAnimatedValue(); 272 | if (progress >= 1) { 273 | isRgihtShape = false; 274 | isAnimating = false; 275 | } else { 276 | invalidate(); 277 | } 278 | } 279 | }); 280 | valueAnimator.start(); 281 | } 282 | 283 | /** 284 | * dpת px. 285 | * 286 | * @param value the value 287 | * @return the int 288 | */ 289 | public int dp2px(float value) { 290 | final float scale = getResources().getDisplayMetrics().densityDpi; 291 | return (int) (value * (scale / 160) + 0.5f); 292 | } 293 | } 294 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OpAnimateView 2 | ---- 3 | Material Design View with Animation 4 | ![](https://img.shields.io/badge/Android-CustomView-brightgreen.svg) 5 | ---- 6 | ![](https://github.com/hanks-zyh/OpAnimateView/blob/master/1.gif) 7 | 8 | #Useage 9 | ```xml 10 | 20 | 21 | 26 | 27 | 38 | 39 | 49 | 50 |