27 comments

  • Pete Lada, over 4 years ago

    (for their iOS app)

    9 points
  • Marc EdwardsMarc Edwards, over 4 years ago

    I love the animation, but I wonder why this is interesting — sprite sheets are really common on the web and in games. Less common on iOS, but it’s still a very normal technique to use.

    6 points
    • Pete LadaPete Lada, over 4 years ago (edited over 4 years ago )

      I guess for game dev sprites are pretty common, but I rarely (if ever?) have come across them used in this way for UI design (especially on iOS, outside of an engine). Perhaps I've missed some, but this was genuinely new to me -- I would have thought to build the animation in code or use a gif (for web).

      0 points
      • Marc EdwardsMarc Edwards, over 4 years ago

        Definitely pretty rare for iOS apps. Super common for iOS games. Super common for web sites.

        Definitely a good technique though.

        0 points
  • Zoltán HosszúZoltán Hosszú, over 4 years ago

    I built a quick version of it in CSS. Might not work in older browsers :)

    4 points
    • Andrew TangAndrew Tang, over 4 years ago

      Awesome stuff!

      Would you be able to explain quickly what your workflow was to create this? Mostly I'm interested in how you created that background image with all those base numbers :? Appreciate any help.

      0 points
      • Marc EdwardsMarc Edwards, over 4 years ago

        Mostly I'm interested in how you created that background image with all those base numbers

        That's a base64 encoded image. It's a way of inlining data within a document, rather than having it as an external file. It works for many things and I'm assuming it was done here to make the code all self contained and in one document.

        There's lots of way to convert to base64, including lots of sites that will do it for you: http://base64converter.com

        (I'm a big fan of the technique and have used it heavily on our site to help with performance.)

        1 point
        • Zoltán HosszúZoltán Hosszú, over 4 years ago

          Yepp, this is how I did it :)

          Before that I measures the icon sizes in Photoshop to get the perfect numbers for the frames, then I used keyframe animations to iterate through them. Would have been a lot easier if the frames were in a line instead of 8 frames pet line, but using a little jump at every 8th steps helped with the fluidity.

          0 points
          • Marc EdwardsMarc Edwards, over 4 years ago

            Yeah, a single line would definitely be easier to work with. There’s GPU texture size limits that may have been a concern (either performance or other technical issues).

            0 points
  • Paul @StammyPaul @Stammy, over 4 years ago

    It's a sprite :)

    4 points
    • Pete Lada, over 4 years ago

      I guess that's true. I'm assuming the original tweeter meant as opposed to an animation. In that sense its not an incorrect description :P

      1 point
    • Daryl GinnDaryl Ginn, over 4 years ago (edited over 4 years ago )

      Which is still technically a static image.

      2 points
  • Jardson AlmeidaJardson Almeida, over 4 years ago

    That's pretty awesome.

    1 point
  • Mason LawlorMason Lawlor, over 4 years ago

    Can anyone fill me in? Why would they use a sprite instead of an SVG animation?

    0 points
    • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

      1. SVG support

      iOS doesn't support SVG natively.

      2. Tooling

      If you're using a PNG sequence or texture atlas like this, you can use any tool you like to create it: After Effects, Photoshop, a full 3D app, whatever.

      3. Cross platform

      A texture atlas as a PNG has full support across iOS, Android, OS X, Windows and the web. SVG has some support, but if you wanted to keep the animation vector on all platforms, you'd likely need to use a combination of SVG, Android vector drawable, Core Graphics paths etc.

      4. Performance

      Showing a static animation is more performant than having to draw a complex shape for each frame. If you used a vector format, but pre-rendered, you're going to use the same amount of memory as a PNG, so why bother?

      5 points
      • Mason LawlorMason Lawlor, over 4 years ago (edited over 4 years ago )

        Thanks Marc. Points 1.1-1.3 make sense.

        Point 1.4 is interesting. Do browsers pre-render SVGs? Or why else would they be the same amount of memory? The entire reason I've recently become intrigued by SVGs was because I was under they impression their load times were fastest.

        P.S.- did you guys discontinue the iStat dashboard widget? (I've been wondering this for a long time)

        1 point
        • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

          Thanks Marc. Points 1.1-1.3 make sense.

          Oops. Due to some sloppy writing on my part, the list was changed from 1, 2, 3, 4 to 1, 1, 1, 1 (hello, Markdown!). All fixed now.

          Do browsers pre-render SVGs? Or why else would they be the same amount of memory?

          Yeah, when a vector is displayed on screen, it needs a bitmap buffer, just like a bitmap image does. Depending on what's being drawn, there may actually be lots of temporary images buffers, too. Things like masking often need a few passes to composite all the parts.

          One place this is obvious is with CSS transforms. In all browsers I've tested for it, CSS transforms are also done on the resulting bitmap image, not the original vector — if you draw an SVG that's 10×10 and scale it up to 100×100 using a CSS transform, it won't look crisp.

          That's not a bad thing, it's just how it works. (Please note that I said CSS transform! Other methods of enlarging an SVG might trigger a repaint to the new size.)

          The entire reason I've recently become intrigued by SVGs was because I was under they impression their load times were fastest.

          The files are usually really small, so they download quickly. So, from that perspective they are great.

          P.S.- did you guys discontinue the iStat dashboard widget? (I've been wondering this for a long time)

          Yep, sorry. Dashboard hasn't had much love from Apple for a long time, so we've discontinued all our widgets. But, we do have a new Notification Center widget.

          1 point
          • Mason LawlorMason Lawlor, over 4 years ago

            Haha, we all know Markdown has it's moments. Thanks for the thorough clarification.

            Luckily I still have the dashboard widget backed up. I usually send it to people when they're setting up their new mac, because that one's still my favorite. It's a shame the dashboard has become somewhat of Apple's bastard child. Because that was my favorite way to use iStat. Menu looks a little too distracting/cluttered for my liking. And iStat mini seems a little too simplistic (at first glance). Anyways, thought my opinion might be interesting to you. Keep up the great work man!

            0 points
  • Victor TolosaVictor Tolosa, over 4 years ago

    anyone know why they included the last 7 rows?

    0 points
    • Alec LomasAlec Lomas, over 4 years ago

      My guess would be they kept those in there just to buy themselves some time to make sure the state change happened in the background while the animation was running (if the user has a weak connection and it takes a little longer than usual to mark it as a favorite or something). I have to admit though, my brain was going crazy trying to spot the difference at first haha

      0 points
      • Marc EdwardsMarc Edwards, over 4 years ago

        It’s still changing size for most of those stars that look the same.

        1 point
        • Paul @StammyPaul @Stammy, over 4 years ago (edited over 4 years ago )

          Yeah, the bounce

          0 points
        • Alec LomasAlec Lomas, over 4 years ago (edited over 4 years ago )

          Oh, OK. I had been staring at my screen for a few hours at that point so I thought my brain was just tricking me into thinking some were slightly larger/smaller. Thanks for clearing that up!

          (also I'm an Android user so I hadn't seen the animation yet)

          0 points
    • Antonio PratasAntonio Pratas, over 4 years ago

      it's the final bouncing effect, there are subtle size differences in there.

      0 points