标签: marquee

使用WPF平滑文本动画(Marquee)

尝试使用流畅的文本动画构建选取框控件.目前的努力包括:

  • 使用翻译变换
  • 在Canvas依赖项属性上使用动画(左,右)
  • 在自定义依赖项属性(Point)上使用动画并使用绘图视觉效果(formattedtext)
  • 使用CompositionTarget.Rendering

但动画仍然不稳定且资源密集(2-10%CPU).

在我假设的默认wpf窗口中使用的测试代码应该产生一个平滑的动画:

   <TextBlock x:Name="_box" FontSize="64" CacheMode="BitmapCache" Text="lorem ipsum">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
        </TextBlock.RenderTransform>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="TextBlock.Loaded">
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation
                    Storyboard.TargetName="AnimatedTranslateTransform" 
                    Storyboard.TargetProperty="X"
                    From="-300" To="300" Duration="0:0:5" 
                    AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </TextBlock.Triggers>
    </TextBlock>
Run Code Online (Sandbox Code Playgroud)

清单:

  • 确认没有软件渲染(ms性能工具和检查RenderCapability.Tier)
  • 调用冻结任何可以想象的对象
  • 禁用任何位图效果和透明度
  • 检查了那里的所有选框控件(同样的问题)

测试:

  • CPU:Intell core 2 duo(T6600)@ 2.2Ghz
  • 内存:4GB
  • GPU:NVidia GeForce 9600M GS(最新驱动程序)
  • 操作系统:Windows 7(64位)

任何想法(或更好的代码示例)?

从响应来看,这似乎不是一个wpf问题(其他选框控件对其他人来说工作正常,但不适合我),坚果我在我测试过的每台机器上都遇到了同样的问题.

wpf animation marquee

6
推荐指数
1
解决办法
2万
查看次数

如何使用Jquery .animate()函数创建连续滚动内容?

可能重复:
在jquery中实现循环滚动条

我想创建垂直卷轴,它将像marquee一样工作.但我希望它是连续的,就像当我们使用选框时,整个内容只有在它完全上升后才会回来,但我希望它是连续的.

这就是我所拥有的...... http://jsfiddle.net/JWfaf/1/

我只希望在一个方向上继续滚动.我希望我已经清除了我想要实现的目标

HTML

<div class="con">
   <ul>
      <li></li>
      <li></li>
      <li></li>
       <li></li>
   </ul>
</div>?
Run Code Online (Sandbox Code Playgroud)

JavaScript的

function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "+=250px"},
{
    duration: speed,
    complete: function ()
    {
        targetElement.animate({ marginTop: "-=250px" },
        {
            duration: speed,
            complete: function ()
            {
                animatethis(targetElement, speed);
            }
        });
    }
});
};

animatethis($('.con ul li:first-child'), 10000);?
Run Code Online (Sandbox Code Playgroud)

javascript jquery marquee scroller jquery-animate

6
推荐指数
1
解决办法
2万
查看次数

Android TextView:有没有办法用短文强制选框动画?

我有一个带有一些文本的TextView,我想让它用滚动的选框动画制作动画.我看到了关于强制选框动画的这个流行问题,但是答案中的代码只有在文本足够长以超出TextView的边界(因此文本被截断)时才起作用,我正在寻找永久性的解决方案无论文本的宽度如何,都要使文本具有此选取框动画; 这可能吗?

animation android marquee textview

6
推荐指数
2
解决办法
4875
查看次数

如何检测字幕文本结束侦听器?

我正在使用文本视图,我已经给了elipzize = marquee,而不是我给这个文本视图的字符串水平滚动但我的问题是我需要检测字幕文本是否已完成并想要加载下一个字符串,我已经给出永远marque所以我不想让文本继续运行我想在文本中改变两件事,所以需要找出它什么时候结束

在这里看到xml

<TextView
                        android:id="@+id/push_message"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_gravity="center_vertical"
                        android:background="#85000000"
                        android:ellipsize="marquee"
                        android:fadingEdge="horizontal"
                        android:textDirection="anyRtl"
                        android:marqueeRepeatLimit="marquee_forever"
                        android:maxLines="1"
                        android:paddingBottom="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="5dp"
                        android:scrollHorizontally="true"
                        android:singleLine="true"
                        android:textColor="#ffffff"
                        tools:ignore="EllipsizeMaxLines" />
Run Code Online (Sandbox Code Playgroud)

请告诉我如何检测选框文本是否在选框文本的末尾结束,我需要触发其他一些evnet

先感谢您

android marquee

6
推荐指数
0
解决办法
380
查看次数

html表格内的自动滚动文本

有没有办法让html表格单元格中的文本自动滚动,比如股票或新闻行情?我已经看到一些使用 CSS 来实现类似旧的已弃用选取框标记的效果的示例,但似乎两者都不能在表格中工作。我知道允许用户使用滚动条浏览文本的单元格溢出的 CSS 解决方案,我特别想知道是否可以在没有用户任何输入的情况下自动执行此操作。

html css html-table marquee overflow

6
推荐指数
1
解决办法
5785
查看次数

Flex中的字幕div

我正在尝试创建一个像字幕效果一样的无限水平“滚动”(例如,像这样的滚动)。

这是我的代码:

.parent {
  border: 1px solid black;
  width: 100%;
  height: 2rem;
}

.container {
  height: 100%;
  display: flex;
  padding-left: 10%;
  border: 1px solid tomato;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.child1 {
  width: 10rem;
  height: 100%;
  background-color: #84B7DF;
}
.child2 {
  width: 18rem;
  height: 100%;
  background-color: #f58db6;
}
.child3 {
  width: 13rem;
  height: 100%;
  background-color: #ffc410;
}
.child4 { …
Run Code Online (Sandbox Code Playgroud)

javascript css scroll marquee

6
推荐指数
0
解决办法
177
查看次数

自动滚动集合像 swift ios 中的 Marquee 一样平滑连续地查看

我得到了需要在底部显示的数据列表,就像 iOS 自动平滑和连续滚动中的新骗子一样。如何实现像 Marquee 到 collectionView 这样的行为,因为我需要索引位置值。

marquee horizontal-scrolling smooth-scrolling uicollectionview swift4

6
推荐指数
1
解决办法
428
查看次数

Android,在相同的RelativeLayout 中更改ImageView 时,RelativeLayout 会重新启动Marquee-TextView

我还没有找到解决我的问题的方法,也许你可以在这里帮助我。

我正在使用带有 ImageView 和 TextView 的 RelativeLayout 作为孩子。TextView 包含一个大文本,应该从右向左滚动。但是每次当我为 ImageView 设置新图像时,选框都会从头开始。

我认为通过设置新图像,TextView 会失去焦点,因此选取框再次开始。我怎样才能防止这种情况发生,或者我做错了什么?如果有人能指出我正确的解决方案,那就太好了。

非常感谢!

您可以使用此代码重现我的问题:

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.text.TextUtils.TruncateAt;
import android.view.Display;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class RelativeLayoutActivity extends Activity {

    private ImageView mImageView;
    private TextView mTextView;

    private Handler mHandler = new Handler();
    private int mCurrentImage = 0;

    private Runnable mCallback = new Runnable() {
        @Override
        public void run() {
            toggleImage();
        }
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); …
Run Code Online (Sandbox Code Playgroud)

android marquee textview android-relativelayout

5
推荐指数
3
解决办法
2298
查看次数

JavaFX - 水平选框文本

我试图实现类似于marquee的效果- 在水平轴上移动的长(在我的情况下)文本的行.我设法让它工作,但我不能称之为令人满意.

我的Controller课程如下:

@FXML
private Text newsFeedText;

(...)
@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
    TranslateTransition transition = TranslateTransitionBuilder.create()
            .duration(new Duration(7500))
            .node(newsFeedText)
            .interpolator(Interpolator.LINEAR)
            .cycleCount(Timeline.INDEFINITE)
            .build();   

    GraphicsDevice gd = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice();
    int width = gd.getDisplayMode().getWidth();

    transition.setFromX(width);
    transition.setToX(-width);
    transition.play();
}
Run Code Online (Sandbox Code Playgroud)

newsFeedText 绑定到一些动态更新的文本源,因此它包含不同数量的文本.

我的代码至少有两个缺点:

  • 转变从去-width+width; width是显示器的分辨率宽度

如果窗口没有经过全面筛选,有时会看不到文本.如果文本更长并且newsFeedText宽度将大于显示器的分辨率宽度,则转换将"消失"(仍然在屏幕上).

  • 目前Duration不依赖于宽度newsFeedText.

现在,它没有任何意义,但如果过渡fromXtoX动态计算,那么它将导致各种速度的选框.

如何摆脱这些弊端?

java javafx marquee javafx-2

5
推荐指数
1
解决办法
4117
查看次数

如何使用 CSS 或 Javascript 创建选取框

我需要创建两个跨越任意大小的浏览器窗口的选取框(一个带有重复图像,一个带有重复链接);选框项目需要从一开始就显示出来,而不需要几秒钟的时间才能出现在屏幕上,并且每个项目之间的距离需要大约 20px/30px。当用户将鼠标悬停在其上时,选取框需要停止在页面上移动。

我正在为客户创建一个网站,我们决定在一个页面上使用选框来显示徽标,在另一个页面上使用选框来显示客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间,以使其看起来无限。我研究并尝试了 CSS 选项,并四处询问,结果发现通常建议使用 Javascript。我刚刚开始深入研究 Javascript,所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似:/sf/answers/3157252591/。这是我想要实现的目标的一个示例:http://maxsiedentopf.com/work-2(只有底部的一个,但左侧没有重叠;只需从左向右移动)。这就是我试图用来达到预期效果的方法:https ://codepen.io/jamesbarnett/pen/kfmKa 。

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 100%;

  overflow: hidden;
  position: relative;
  background-color: #e9e5fb;  
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0 4px 0;
}

.marquee div {
  display: inline-block;
  width: 300%;
  height: 40px;

  position: absolute;
  overflow: hidden;

  animation: marquee 12s linear infinite;
}

.marquee span {
  float: left; …
Run Code Online (Sandbox Code Playgroud)

javascript css marquee

5
推荐指数
1
解决办法
6125
查看次数