kandi background
Explore Kits

svg-text-animate | Javascript library for convert texts to SVG stroke animations | Animation library

 by   oubenruing JavaScript Version: v1.3.0 License: MIT

 by   oubenruing JavaScript Version: v1.3.0 License: MIT

Download this library from

kandi X-RAY | svg-text-animate Summary

svg-text-animate is a JavaScript library typically used in User Interface, Animation applications. svg-text-animate has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.
A Javascript library for convert texts to SVG stroke animations in the browser.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • svg-text-animate has a low active ecosystem.
  • It has 200 star(s) with 15 fork(s). There are 3 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 0 open issues and 4 have been closed. On average issues are closed in 5 days. There are no pull requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of svg-text-animate is v1.3.0
svg-text-animate Support
Best in #Animation
Average in #Animation
svg-text-animate Support
Best in #Animation
Average in #Animation

quality kandi Quality

  • svg-text-animate has 0 bugs and 0 code smells.
svg-text-animate Quality
Best in #Animation
Average in #Animation
svg-text-animate Quality
Best in #Animation
Average in #Animation

securitySecurity

  • svg-text-animate has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • svg-text-animate code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
svg-text-animate Security
Best in #Animation
Average in #Animation
svg-text-animate Security
Best in #Animation
Average in #Animation

license License

  • svg-text-animate is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
svg-text-animate License
Best in #Animation
Average in #Animation
svg-text-animate License
Best in #Animation
Average in #Animation

buildReuse

  • svg-text-animate releases are available to install and integrate.
  • Installation instructions are not available. Examples and code snippets are available.
svg-text-animate Reuse
Best in #Animation
Average in #Animation
svg-text-animate Reuse
Best in #Animation
Average in #Animation
Top functions reviewed by kandi - BETA

kandi has reviewed svg-text-animate and discovered the below as its top functions. This is intended to give you an instant insight into svg-text-animate implemented functionality, and help decide if they suit your requirements.

  • Parse a CFF string
  • parse code
  • Convert a font - table tree to an icon table .
  • Parse buffer data
  • makes a table table table
  • Parse the glyph information
  • create name table
  • Parse CFF information
  • Create a DFF table .
  • Convert path to vertical scale

svg-text-animate Key Features

A Javascript library for convert texts to SVG stroke animations in the browser.

下载使用

copy iconCopydownload iconDownload
<script src="YOURPATH/svg-text-animate.js"></script>
or
<script src="YOURPATH/svg-text-animate.min.js"></script>
<script>
  const fontawesome = new SVGTextAnimate("YOUR FONT FILE");
</script>

CDN

copy iconCopydownload iconDownload
<script src="https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/dist/svg-text-animate.min.js"></script>

Demo

copy iconCopydownload iconDownload
    const opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/OpenSans-Regular-webfont.woff", {
      "duration": 300,
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 150,
      "mode": "delay"
    }, {
      "stroke": "#005792",
      "stroke-width": "2px",
      "font-size": 55
    });

    await opensans.setFont();
    
    opensans.create("svg-text-animate", "#name");

setfont()

copy iconCopydownload iconDownload
  await opensans.setFont();

create(text,selector) add(text,selector)

copy iconCopydownload iconDownload
    opensans.create("svg-text-animate", "#name");

    opensans.setOptions({
      "duration": 500,
      "timing-function": "linear",
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 50,
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "2px",
      "font-size": 23
    }).create("Try it", ".button");

特殊字体

copy iconCopydownload iconDownload
    fontawesome.setOptions({
      "duration": 2000,
      "timing-function": "linear",
      "direction": "alternate",
      "delay": 500,
      "iteration-count": "infinite",
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "1px",
      "font-size": 22
    }).create(String.fromCharCode(0xf581), "#symbols")
      .create(String.fromCharCode(0xf164), "#symbols2");

      //你可以在下载字体的网站找到要使用的十六进制代码 调用create时传入即可。
      //将String.fromCharCode(十六进制代码) 作为create函数的第一个参数。

Community Discussions

Trending Discussions on Animation
  • Xamarin.Forms animation inside Listview stops working if collection changes
  • How to repeat Android Animation
  • How to detect that a button is pressed in Jetpack Compose?
  • SVG stop running chained animation (<animate> tag)
  • additionalSafeAreaInsets is not accounted for during view controller dismissal, using custom UIViewControllerTransitioningDelegate
  • How can I prevent my Animations from starting when the other animations are playing?
  • SwiftUI view animates at unexpected path
  • Vue.js CSS animation not working correctly when using v-if
  • Animating wave pulse using matplotlib
  • How do I disable UIStackView default show/hide animation?
Trending Discussions on Animation

QUESTION

Xamarin.Forms animation inside Listview stops working if collection changes

Asked 2022-Mar-22 at 05:34

I am having a hard time figuring what's going on with my animation.

Viewmodel is composed of an ObservableCollection and every item contains a child ObservableCollection.

Parents collection is bound to a BindableLayout. The ItemTemplate of that layout contains a Listview to display child's elements.

<StackLayout BindableLayout.ItemsSource ="{Binding Parents}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:ParentRows">
            <StackLayout>      
                <Grid BackgroundColor="White" >
                     <!-- Some bindable content there -->
                </Grid>
            
               <ListView ItemsSource="{Binding Childs}" CachingStrategy="RecycleElementAndDataTemplate" RowHeight="50">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="models:ChildRows">
                            <ViewCell>
                                <StackLayout BackgroundColor="White">
                                    <controls:AnimatedGrid Refresh="{Binding Animation}"
                                          <!-- Some bindable content there -->
                                    </controls:AnimatedGrid>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

I am using an AnimatedGrid on the child listview, this control is inherinting from Grid. It has an extra BindableProperty nammed Refresh and an Animation code that gets called whenever Refresh property changes.

        private async void AnimateItem()
        {
            await Device.InvokeOnMainThreadAsync(() =>
            {
                this.RotateTo(360,500);
            });
        }

Everything works fine until i start filtering the list. Once i filter the list, subsequent call of AnimateItem will have no effect. To be more precise, if parent item got removed from list, and then added again, childs of this parent will never animate again. Filtering the List consist of Removing/Inserting parents to the observable collection (myCollection.Remove(item), myCollection.Insert(index, item), using Collection methods from framework).

This does not seems to be an observable collection binding issue, as values inside parent and childs collection still update perfectly find. Changing CachingStrategy also have no impact on the issue.

I found that, if i replace the ListView control by a CollectionView, the problem disappear. However, i realy want to find a solution that would alow me to keep the listview control as switching to CollectionView would introduce to many other undesirable effect.

Edit 22/02/2022 : I made a sample project to reproduce the issue on github.

  • Basicaly, you can click the "Rotate Random" multiple time to make random child spin.
  • Once you click the "Remove and add 2 parent", you can see that the removed/reinserted items does not rotate anymore.

Edit 15/03/2022 : I am still not able to figure what's wrong. However, for test purpose, i added in the control constructor, a task.delay followed by an animation call, and this call is working on filtered items. That's beyond my understanding.

ANSWER

Answered 2022-Mar-22 at 05:16

The solution

In your AnimatedGrid class, add an isAttached flag, and add the following lines to your OnPropertyChanged override:

bool isAttached = false;

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    base.OnPropertyChanged(propertyName);

    if (propertyName == "Renderer")
    {
        isAttached = !isAttached;
        if (!isAttached) this.RemoveBinding(RefreshProperty);
    }

    if (propertyName == nameof(Refresh))
    {
    ...

The why

Disclaimer: it took me a long time to figure out what was going on here, and although i was able to fix the problem, i would not claim that i completely and perfectly understand it. I believe this is a bug in Xamarin, and in your case i would file an issue in Github (although maybe MAUI will have this corrected...)

When a ChildItem is removed (do Filter), the old ChildItem-AnimatedGrid's Refresh property remains bound to the ChildItem's AnimationInt property.

When a ChildItem is added again (remove Filter), a new view is created.

Now the problem is evident: when the ChildItem's AnimationInt property changes (tap on ROTATE RANDOM button) the old ChildItem-AnimatedGrid's Refresh is notified, and then the old View is rotated, but the new ramains unchanged (it does not rotate).


Once the problem is understood, we need to figure out how to remove the binding of the old view when the view is dettached: well, to do this i used the fact that the VisualElement's Renderer property is set/modified when the element is attached and again when it is detached: The fist time it is called i set the isAttached flag to true. The second time it is called i set the flag to false, and i remove the binding. Removing the binding of the old View allows the new View to be correctly bound.

Source https://stackoverflow.com/questions/71190208

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install svg-text-animate

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with svg-text-animate
Try Top Libraries by oubenruing
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.