Erik nfc animation v4 #131
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Integrate the NFC payment animation from erik_nfc_animation_v3 branch, providing a visually engaging full-screen animation during NFC payment processing. The animation displays an expanding orange circle that morphs into a full-screen blob, then transitions to green on success or red on error, with a checkmark or error icon respectively. Changes: - Add WebView-based animation (nfc_animation.html) with simplified loading spinner to avoid distortion issues - Replace simple NFC reading overlay with full-screen animation container - Add fade animations and button styling resources - Integrate animation into PaymentRequestActivity with proper lifecycle management Technical Details: - Animation is triggered when NFC reading starts (onNfcReadingStarted) - Uses JavaScript bridge (AnimationBridge) for WebView-to-Kotlin communication - Implements full-screen mode during animation for immersive experience - Includes 10-second safety timeout to handle stuck payments - Animation success/error states are synchronized with payment callbacks Auto-Withdrawal Fix: - Extract post-payment operations into triggerPostPaymentOperations() helper method to ensure consistent auto-withdrawal behavior - Both NFC animation and non-NFC payment paths now use the same auto-withdrawal code path - Prevents duplication and ensures auto-withdrawal works correctly regardless of payment method Files Added: - app/src/main/assets/nfc_animation.html - WebView animation HTML/CSS/JS - app/src/main/res/anim/fade_in.xml - Fade-in transition animation - app/src/main/res/anim/fade_out.xml - Fade-out transition animation - app/src/main/res/drawable/bg_button_black_pill.xml - Button background Files Modified: - app/src/main/java/com/electricdreams/numo/PaymentRequestActivity.kt - Add WebView setup and animation control methods - Add full-screen mode handling - Integrate animation with payment success/error callbacks - Extract triggerPostPaymentOperations() for consistent auto-withdrawal - app/src/main/res/layout/activity_payment_request.xml - Replace nfc_reading_overlay with nfc_animation_container - Add WebView and close button for animation - app/src/main/res/values/strings.xml - Add payment_request_animation_close string resource The animation only affects the visual presentation of NFC payments and does not modify any payment processing or auto-withdrawal logic.
The animation was experiencing intermittent stuttering and frame drops during the transition from the morphing phase to the blob phase. This was caused by a conflict between the CSS transition and the keyframe animation both trying to control the transform property. The morphing phase sets transform: rotate(45deg) via CSS transition, and the blob phase's blobMorph keyframe animation was also animating transform: rotate() from 0deg to 270deg. When the class switched from morphing to blob, the browser had to resolve competing transform values, causing unpredictable animation behavior. Fix: Remove transform animation from the blobMorph keyframe animation, keeping only the border-radius morphing effect. The CSS transition now smoothly handles the rotation from 45deg to 0deg without interference from the keyframe animation.
…ot visible, causing the user to double tap.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix Intermittent Stuttering in NFC Payment Animation
Overview
Fixes intermittent animation stuttering and frame drops during the NFC payment animation, specifically during the transition from the morphing phase to the blob phase.
Problem
The animation exhibited inconsistent stuttering behavior—occasionally hanging or hitching mid-transition, then snapping rapidly to completion instead of easing smoothly. This created a "janky" experience that felt like dropped frames or interrupted timing functions.
Root Cause
The issue was caused by a property conflict between CSS transitions and keyframe animations both trying to control the
transformproperty:transform: rotate(45deg)via CSS transitionblobMorphkeyframe animation was also animatingtransform: rotate()from0degto270degWhen the class switched from
morphingtoblob, the browser had to resolve competingtransformvalues:rotate(45deg)→rotate(0deg)rotate(0deg)on the first frameThis race condition caused unpredictable animation behavior, with the browser sometimes prioritizing the transition and sometimes the keyframe, resulting in the intermittent stuttering.
Solution
Removed
transformanimation from theblobMorphkeyframe animation, keeping only theborder-radiusmorphing effect. The CSS transition now smoothly handles the rotation from45degto0degwithout interference from the keyframe animation.Changes:
@keyframes blobMorphto only animateborder-radius(removed alltransform: rotate()declarations)Testing
Tested on:
https://github.com/user-attachments/assets/fb57b93e-2574-40fe-a610-536b66ca131d
https://github.com/user-attachments/assets/86290954-d865-42c4-8cda-456771d646d0
The animation now runs (fairly) smoothly without stuttering or frame drops across all phases. The blob morphing effect is preserved while ensuring consistent, fluid transitions.
Technical Details
The fix maintains the visual design while resolving the underlying performance issue. The blob morph animation continues to provide the organic, fluid shape transformation through border-radius keyframes, while rotation is handled by the more predictable CSS transition system.