Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Master of Canvas

13,022 views

Published on

DroidKaigi2016 RoomB
https://github.com/amyu/DroidKaigiMasterOfCanvas

Published in: Technology

Master of Canvas

  1. 1. Master of Canvas Droid Kaigi 2016 RoomB Yuki Mima (@amyu_san)
  2. 2. About me ▸ Name : Yuki Mima ▸ Twitter : @amyu_san ▸ Github : amyu ▸ Work : University Student
  3. 3. Do you think what a good application?
  4. 4. It is great service content?
  5. 5. I think it has a great UI/UX
  6. 6. I want to give the user the aha experience!
  7. 7. Agenda ▸ WaveSwipeRefreshLayout ▸ Path#cubicTo ▸ TypeEvaluator ▸ Interpolator ▸ BeerSwipeRefreshLayout ▸ Path#op ▸ ColoringLoading, TextMorphingView ▸ To extract the path from Illustrator
  8. 8. WaveSwipeRefreshLayout ‣ Path#cubicTo ‣ TypeEvaluator ‣ Interpolator
  9. 9. WaveSwipeRefreshLayout Path#cubicTo ▸ public void cubicTo (float x1, float y1, float x2, float y2, float x3, float y3) Add a cubic bezier from the last point, approaching control points (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).
  10. 10. WaveSwipeRefreshLayout Path#cubicTo
  11. 11. WaveSwipeRefreshLayout Path#cubicTo
  12. 12. Next TypeEvaluator
  13. 13. WaveSwipeRefreshLayout TypeEvaluator ▸ This function returns the result of linearly interpolating the start and end values, with fraction representing the proportion between the start and end values. ▸ Property values can get by ValueAnimator#getAnimatedValue () ▸ ValueAnimator.ofObject(…)
  14. 14. WaveSwipeRefreshLayout TypeEvaluator ▸ ArgbEvaluator ▸ This evaluator can be used to perform type interpolation between integer values that represent ARGB colors. ▸ RectEvaluator ▸ This evaluator can be used to perform type interpolation between Rect values. ▸ PointFEvaluator ▸ …
  15. 15. WaveSwipeRefreshLayout TypeEvaluator
  16. 16. WaveSwipeRefreshLayout TypeEvaluator
  17. 17. Next Interpolator
  18. 18. WaveSwipeRefreshLayout Interpolator ▸ An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc.
  19. 19. WaveSwipeRefreshLayout Interpolator http://www.adakoda.com/adakoda/2011/08/android-38.html
  20. 20. WaveSwipeRefreshLayout Interpolator
  21. 21. WaveSwipeRefreshLayout Interpolator http://cogitolearning.co.uk/?p=1078
  22. 22. WaveSwipeRefreshLayout Interpolator
  23. 23. WaveSwipeRefreshLayout Interpolator
  24. 24. WaveSwipeRefreshLayout Interpolator
  25. 25. WaveSwipeRefreshLayout Interpolator Reversal
  26. 26. WaveSwipeRefreshLayout Interpolator
  27. 27. WaveSwipeRefreshLayout Interpolator Grapher
  28. 28. WaveSwipeRefreshLayout Interpolator
  29. 29. WaveSwipeRefreshLayout Interpolator
  30. 30. Next Step Interpolator
  31. 31. WaveSwipeRefreshLayout Interpolator
  32. 32. WaveSwipeRefreshLayout Interpolator ▸ To implement the Interpolator of vertical and horizontal.
  33. 33. WaveSwipeRefreshLayout Interpolator
  34. 34. WaveSwipeRefreshLayout Interpolator
  35. 35. WaveSwipeRefreshLayout Interpolator
  36. 36. WaveSwipeRefreshLayout Interpolator
  37. 37. WaveSwipeRefreshLayout Interpolator
  38. 38. WaveSwipeRefreshLayout Interpolator
  39. 39. BeerSwipeRefreshLayout ‣ Path#op
  40. 40. BeerSwipeRefreshLayout Path#op ▸ Added in API level 19 ▸ Set this path to the result of applying the Op to this path and the specified path. The resulting path will be constructed from non-overlapping contours.
  41. 41. BeerSwipeRefreshLayout Path#op Path to be Op Path to Op
  42. 42. BeerSwipeRefreshLayout Path#op DIFFERENCE
  43. 43. BeerSwipeRefreshLayout Path#op REVERCE_DIFFERENCE
  44. 44. BeerSwipeRefreshLayout Path#op INTERESECT
  45. 45. BeerSwipeRefreshLayout Path#op UNION
  46. 46. BeerSwipeRefreshLayout Path#op XOR
  47. 47. BeerSwipeRefreshLayout Path#op
  48. 48. BeerSwipeRefreshLayout Path#op
  49. 49. BeerSwipeRefreshLayout Path#op
  50. 50. ColoringLoading TextMorphingView ‣ To extract the path from Illustrator
  51. 51. ColoringLoading, TextMorphingView To extract the path from Illustrator
  52. 52. ColoringLoading, TextMorphingView To extract the path from Illustrator
  53. 53. ColoringLoading, TextMorphingView To extract the path from Illustrator
  54. 54. ColoringLoading, TextMorphingView To extract the path from Illustrator ▸ ExtendScript Toolkit ▸ development and debugging tool for JavaScript scripts included with Adobe Creative Suide 4 and applications such as Bridge, Photoshop, Illustrator, InDesign, and After Effects.
  55. 55. ColoringLoading, TextMorphingView To extract the path from Illustrator
  56. 56. ColoringLoading, TextMorphingView To extract the path from Illustrator
  57. 57. ColoringLoading, TextMorphingView To extract the path from Illustrator
  58. 58. Finally…
  59. 59. Thank you for Listening!
  60. 60. Text ▸ WaveSwipeRefreshLayout ▸ https://github.com/recruit-lifestyle/WaveSwipeRefreshLayout ▸ BeerSwipeRefreshLayout ▸ https://github.com/recruit-lifestyle/BeerSwipeRefresh ▸ ColoringLoading ▸ https://github.com/recruit-lifestyle/ColoringLoading ▸ Pikasan ▸ https://github.com/amyu/Pikasan

×