Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chet Haase & Romain Guy: U and I

1fa9cb8c7997c8c4d3d251fb5e41f749?s=47 Realm
July 28, 2016

Chet Haase & Romain Guy: U and I

Presented at 360|AnDev 2016

1fa9cb8c7997c8c4d3d251fb5e41f749?s=128

Realm

July 28, 2016
Tweet

Transcript

  1. Our Obsessions Romain Guy @romainguy Chet Haase @chethaase U and

    I
  2. Agenda • Chet’s Obsession • Romain’s Obsession

  3. Animation Rules Read this!

  4. We Talked about this before Google I/O 2013 (YouTube)

  5. And Before That... Devoxx 2009 (parleys.com)

  6. Staging

  7. Staging

  8. Slow in/out Dem o! Linear Ease In/Out Mechanical Natural Sucky

    Better
  9. Arc Dem o!

  10. Arc - Example LayoutParams params = (LayoutParams) arcMotionButton.getLayoutParams();
 if (mTopLeft)

    {
 params.rightToRight = R.id.parentContainer;
 params.bottomToBottom = R.id.parentContainer;
 params.leftToLeft = -1;
 params.topToBottom = -1;
 } else {
 params.leftToLeft = R.id.parentContainer;
 params.topToBottom = R.id.trajectoryGroup;
 params.rightToRight = -1;
 params.bottomToBottom = -1;
 }
 arcMotionButton.setLayoutParams(params);
 mTopLeft = !mTopLeft; Step 1: Get the current position final float oldX = arcMotionButton.getX();
 final float oldY = arcMotionButton.getY(); Step 2: Reposition views
  11. Arc - Example Step 3: Wait for layout final ViewTreeObserver

    observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this); 
 // ...
 return true;
 }
 }
 ); final ViewTreeObserver observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this);
 float deltaX = arcMotionButton.getX() - oldX;
 float deltaY = arcMotionButton.getY() - oldY;
 PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("translationX", -deltaX, 0);
 PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("translationY", -deltaY, 0);
 ObjectAnimator.ofPropertyValuesHolder(arcMotionButton,
 pvhX, pvhY).start();
 return true;
 }
 }
 );
 Step 3a: Animate from old to new location final ViewTreeObserver observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this);
 Path path = new Path();
 path.moveTo(-deltaX, -deltaY);
 path.quadTo(-deltaX, 0, 0, 0);
 ObjectAnimator.ofFloat(arcMotionButton, "translationX", "translationY", path).start();
 return true;
 }
 }
 ); Step 3b: Make it curved!
  12. Arc - Better Example LayoutParams params = (LayoutParams) arcMotionButton.getLayoutParams();
 if

    (mTopLeft) {
 params.rightToRight = R.id.parentContainer;
 params.bottomToBottom = R.id.parentContainer;
 params.leftToLeft = -1;
 params.topToBottom = -1;
 } else {
 params.leftToLeft = R.id.parentContainer;
 params.topToBottom = R.id.trajectoryGroup;
 params.rightToRight = -1;
 params.bottomToBottom = -1;
 }
 arcMotionButton.setLayoutParams(params);
 mTopLeft = !mTopLeft; Step 1: Reposition views Step 2: Run a transition TransitionManager.beginDelayedTransition(parentContainer); ChangeBounds arcTransition = new ChangeBounds();
 arcTransition.setPathMotion(new ArcMotion());
 TransitionManager.beginDelayedTransition(parentContainer, arcTransition); Step 2: Make it curved!
  13. Secondary Motion

  14. Secondary Motion

  15. Timing

  16. Solid drawing

  17. Other Cartoon Animation Rules Antici Straight ahead and pose-to-pose Follow-through

    and pation Squash & Stretch Exagggggggggggggggggggggggggggggggggggggggeration overlap Appeal
  18. let’s talk about… COLORS

  19. Color Spaces Gamma & Linear

  20. Gamma & Linear

  21. You are doing it wrong —— — — — —

    — —— —
  22. None
  23. A CRT uses an electron gun fired at a phosphorescent

    screen
  24. None
  25. Gamma 2.2

  26. Gamma 2.2 Gamma Correction

  27. what about LCD? >>>>>>>>>>>>> <<<<<<<<<<<<<

  28. None
  29. Our visual system follows Steven’s power law The eye’s response

    is non-linear Gamma! Subjective magnitude of sensation Magnitude of stimulus
  30. None
  31. The response curve of an LCD is not a gamma

    curve It is made to look like a gamma curve with hardware processing
  32. We gamma-encode to optimize bandwidth and storage It is a

    compression scheme
  33. Linear Gamma Input quantized over 5 bits for visualization 50%

    of the precision allocated to the darkest 50% intensities 70% of the precision allocated to the darkest 50% intensities 11~12 bits needed 8 bits are sufficient
  34. Gamma encoding is not necessary with high precision, linear formats

    Examples: OpenEXR, PNG 16 bit, Photoshop 16 & 32 bit, RAW files
  35. None
  36. None
  37. findViewById(R.id.root).setBackground(0xfff32272); Gamma encoded

  38. a=0 b=1 c=0.21 c=0.5

  39. None
  40. >>>>>>>>>>>>>>linear space<<<<<<<<<<<<<< Do all the math in

  41. // Gamma encoded colors
 int color1 = getColor1();
 int color2

    = getColor2();
 
 // Extract red and convert to linear
 float r1 = ((color2 >> 16) & 0xff) / 255.0f;
 r1 = (float) Math.pow(r1, 2.2); float r2 = // …
 
 // Do the math and gamma-encode
 float r = r1 * 0.5f + r2 * 0.5f;
 r = (float) Math.pow(r, 1.0 / 2.2);
  42. // Do not gamma-decode alpha // Alpha is *linear*! //

    Make sure the Gray profile // is set to “sGray” in // Photoshop’s color settings
  43. // OpenGL has extensions and APIs // for sRGB encoding/decoding

    and // correct, linear blending // Use them, it’s free
  44. Blurs & resizes → darker image Animations → brightness shifts

    3D lighting → hue shifts This issue affects everything
  45. None
  46. Color Spaces It’s more complicated

  47. What is a color? For users, it’s a visual perception

    that can be described by hue, brightness and colorfulness For developers, it’s a tuple of numbers, in a color model associated with a color space RGB(0.92,0.91,0.86) CMYK(0.5,0.3,0.6,0)
  48. Visible Spectrum CIE 1931 Chromaticity Diagram

  49. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces

  50. It has 3 primaries It has a white point It

    has conversion functions What is a color space?
  51. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces

  52. The primaries do not represent a surface but a solid

    in CIE xyY This is sRGB ͢
  53. Equivalent of the gamma functions Opto-electronic conversion function (OECF) Electro-optical

    conversion function (EOCF) Conversion functions
  54. Which color space? Unless you know otherwise, always assume sRGB

  55. sRGB

  56. sRGB

  57. float OECF_sRGB(float linear) {
 float low = linear * 12.92f;


    float high = (pow(linear, 1.0f / 2.4f) * 1.055f) - 0.055f;
 return linear <= 0.0031308f ? low : high;
 }
  58. Easy to optimize Use lookup tables, 8 bits for encoding,

    16 bits for decoding
  59. OECF

  60. HDTV, Rec.709 →Same primaries & white point as sRGB →Different

    OECF/EOCF, ≈gamma 2.4 UHDTV, Rec.2020 →Similar OECF/EOCF to Rec.709 Android TV
  61. None
  62. None
  63. You are doing it wrong —— — — — —

    — —— —
  64. Android is doing it wrong

  65. Gradients Animations (fixed in N) Bitmap resize Blending Anti-aliasing Etc…

  66. Let’s recap sRGB input EOCF Linear input Processing OECF Display

    Color pipeline
  67. Questions